如何使用角形路由器来特定页面

我想用角度路由器切换两个页面,并且已经将这两个组件添加到了角度路由器,但是,无论我尝试使用什么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'上吗?

我希望有人能帮助我,非常感谢您的帮助。

dongyafei123 回答:如何使用角形路由器来特定页面

两个组件的选择器相同。即应用根。

从仪表板@ component.ts和login.component.ts中的@Component装饰器中删除选择器属性

由于您在app.routing.module.ts中为这些组件定义了路由,因此无需声明选择器属性

本文链接:https://www.f2er.com/3167407.html

大家都在问