我想用角度路由器切换两个页面,并且已经将这两个组件添加到了角度路由器,但是,无论我尝试使用什么url,浏览器始终显示“登录”组件。如果删除“登录”,则“仪表盘”成功显示。
这是我的示例代码:
dashboard.component.ts
@Component({
selector: 'app-root',templateUrl: './dashboard.component.html',styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent {
title = 'dashboard';
}
login.component.ts
@Component({
selector: 'app-root',templateUrl: './login.component.html',styleUrls: ['./login.component.scss']
})
export class LoginComponent {
title = 'login';
}
app.component.html
<h1>{{title}}</h1>
<router-outlet></router-outlet>
app.component.ts
export class AppComponent implements OnInit {
title = 'Here is AppComponent';
ngOnInit() {}
}
app.module.ts
@NgModule({
declarations: [
AppComponent,DashboardComponent,LoginComponent
],imports: [
BrowserModule,AppRoutingModule,SimpleNotificationsModule.forRoot(),],providers: [],bootstrap: [DashboardComponent,LoginComponent]
})
export class AppModule { }
app-routing.module.ts
const appRoutes: Routes = [
{ path: 'login',component: LoginComponent },{ path: 'dashboard',component: DashboardComponent },];
@NgModule({
imports: [RouterModule.forRoot( appRoutes,{ enableTracing: true })],exports: [RouterModule]
})
export class AppRoutingModule { }
index.html
..
..
<base href="/">
</head>
<body>
<app-root></app-root>
</body>
</html>
我猜问题出在组件selector: 'app-root'
上吗?
我希望有人能帮助我,非常感谢您的帮助。