[英]Angular routing issue - url updating but not page
我有两个部分,家庭和欢迎。 欢迎使用一个按钮,单击该按钮应将我带到“主页”页面。 相反,它将URL更新为“ http:// localhost:4200 / home ”,并且不执行其他任何操作。 该按钮保持不变,而不是被原始组件内容替换。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { WelcomeComponent } from './pages/welcome/welcome.component';
import { HomeComponent } from './pages/home/home.component';
const appRoutes: Routes = [
{ path: 'welcome', component: WelcomeComponent },
{ path: 'home', component: HomeComponent }
];
@NgModule({
declarations: [
AppComponent,
WelcomeComponent,
HomeComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(
appRoutes
)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
welcome.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-welcome',
templateUrl: './welcome.component.html',
styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit {
constructor(private router: Router) { }
ngOnInit() {
}
myFunction() {
this.router.navigate(['/home'])
}
}
welcome.html
<button class="btn btn-success" type="button" id="loginButton" (click)="myFunction()">Sign In</button>
home.html的
<p>
home works!
</p>
试试这个:在app.module.ts中:-
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { LayoutComponent } from "./layout.component";
const appRoutes: Routes = [{
path: "",
component: LayoutComponent,
children: [{
path: "",
redirectTo: "welcome"
},
{
path: "welcome",
loadChildren: "./welcome/welcome.module#WelcomeModule"(your path)
},
{
path: "home",
loadChildren: "./home/home.module#HomeModule"(your path)
}
}
];
在welcome.html中
<button class="btn btn-success" type="button" id="loginButton" routerLink="/welcome" [routerLinkActive]="['router-link-active']">Sign In</button>
评论是正确的。 添加默认路径和router-outlet标记可解决此问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.