如何将多个组件添加到路径

时间:2018-11-09 00:01:38

标签: angular

@NgModule({
  declarations: [
    AppComponent,
    navBarComponent,
    searchBarComponent

  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      {path: 'home', component: navBarComponent},
      {path: 'events', component: navBarComponent},
      {path: 'profile', component: navBarComponent},
      {path: 'organizations', component: navBarComponent},
      {path: '', redirectTo: 'home', pathMatch: 'full'}
    ])
  ],

我想知道是否有一种简单的方法可以在路径中添加多个组件。如您所见,我已经向每个页面添加了一个navBarComponent,但是我也想将searchBarComponent也添加到主页中。我尝试用逗号分隔它们并将其作为数组传递,但两种方法均失败。请让我知道我是否缺少某些东西,或者是否有更简单的方法来解决这个问题。

2 个答案:

答案 0 :(得分:0)

我认为,仅当您将在每个页面中使用通用组件而不是在每个组件上添加通用组件时,才将通用组件添加到根组件中。

答案 1 :(得分:0)

您可以为相同的组件和不同的路径设置路径变量:

{path: '#your_scope/:route_name', component: navBarComponent}

,每个/#your_scope/what_the_fuck都将路由到navBarComponent。

但是顺便说一下。最好只将根组件中的navBarComponent用作模板。