Angular路由不响应子路由的子路由

发布于03月23日

我有以下路由:


export const routes: Routes = [
    {
        // allowed for user with token
        path: 'admin', component: AdminMainComponent,
        canActivate: [authGuard],
        children: [
            {
                path: 'products',
                component: AdminProductListComponent,
                children: [
                    {path: 'create', component: AdminCreateProductComponent},
                ]
            },
            {
                path: 'categories',
                component: CategoryListComponent,
                children: [
                    {path: 'create', component: CreateCategoryComponent}
                ]
            },
        ]
    },

   ... 
];

当我访问/admin/products/create时，我看到了AdminProductListComponent的内容.同样的问题是分类.怎么了？

推荐答案

子管线在其父构件中渲染. 这意味着父组件必须包含<router-outlet/>，才能呈现其子组件.

如果您的路由配置高于AdminProductListComponent，则其子 node (AdminCreateProductComponent)必须包含<router-outlet/>.

如果AdminCreateProductComponent不打算在AdminProductListComponent中呈现，则应将它们定义为通用的"products"路径下的同级:

export const routes: Routes = [
  {
    path: 'admin', 
    component: AdminMainComponent,
    canActivate: [authGuard],
    children: [
      {
        path: 'products',
        children: [
          { path: '',       component: AdminProductListComponent   },
          { path: 'create', component: AdminCreateProductComponent },
        ]
      },
      {
        path: 'categories',
        children: [
          { path: '',       component: CategoryListComponent   },
          { path: 'create', component: CreateCategoryComponent },
        ]
      },
    ]
  },
];

请注意，"products"和"categories"路径没有指定component，因此父组件将是AdminMainComponent.

你也可以删除中间路径，并将所有路由声明为"admin"的直接子级:

export const routes: Routes = [
  {
    path: 'admin', 
    component: AdminMainComponent,
    canActivate: [authGuard],
    children: [
      { path: 'products',          component: AdminProductListComponent   },
      { path: 'products/create',   component: AdminCreateProductComponent },
      { path: 'categories',        component: CategoryListComponent       },
      { path: 'categories/create', component: CreateCategoryComponent     },
    ]
  },
];