如何特定页面使用角度路由器答案

【问题标题】：how to specific page use angular router如何特定页面使用角度路由器
【发布时间】：2019-11-04 10:48:24
【问题描述】：

我想用角度路由器切换两个页面，我已经将这两个组件添加到角度路由器，但是，无论我尝试什么 url，浏览器总是显示“登录”组件。如果我删除“登录”，则“仪表板”显示成功。

这是我的示例代码：

dashboard.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent   {
  title = 'dashboard';
}

@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'？

希望有人可以帮助我，非常感谢您的帮助。

【问题讨论】：

将您的登录选择器更改为app-login，将仪表板选择器更改为app-dashboard，每个组件的选择器必须是唯一的
好的，我发现了错误，第一个，来自@Component 装饰器的选择器属性
并移除@NgModule bootstrap: [DashboardComponent, LoginComponent] at app.module.ts，它应该是 [AppComponent] only

标签： angular routing

【解决方案1】：

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

从 dashboard.component.ts 和 login.component.ts 中的 @Component 装饰器中删除 selector 属性

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

【讨论】：