Angular 2+ 父/子路由

Question

我设置了这两条路由

{ path: 'manage-brands', component: ManageBrandsComponent, canActivate: [AuthGuard] },

{ path: 'manage-brand/:brandId',  component: BrandAdminComponent },

但我真正想要的是： /管理品牌 -> ManageBrandsComponent 然后路线中是否应该有一个 id /manage-brands/brandId -> BrandAdminComponent

有没有一种方法可以使用 children: [ ] 来实现这一点，或者我是否必须仅使用一个组件来渲染基于 RouteSnapshot 的 ng-template？

Answer 1

这是实现此行为的父子方法。

const routes: Routes = [

{
    path: 'manage-brands', component: ManageBrandsComponent,
    canActivate: [AuthGuard],
    children: [
      { path: ':brandId', component: BrandAdminComponent }
    ]
}

]

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule { }

Angular 2+ 父/子路由

Angular 2+ parent / child routes

angular2-routing

angular