Angular 6路由-根據父級路由參數設置子級路由組件

Question

我的Angular 6項目中具有以下路由配置。

    path: 'chart/:feature',
    component: ChartStateComponent,
    canActivateChild: [ChartGuardService],
    children: [
        {
            path: ':id',
            redirectTo: '/chart/:feature/:id/profile',
            pathMatch: 'full'
        },
        {   path: ':id/:tab',
            component: TestOneComponent,
            pathMatch: 'full'
        }
    ]

feature是PARAM到父路徑，它可以像4個不同的值one ， two ， three和four 。 現在，根據此參數，我需要為children路徑設置組件。

例如，如果feature設置為one ，則將TestOneComponent設置為子組件。

我怎樣才能做到這一點？

Answer 1

您可以嘗試以下方法：

path: 'chart',
component: ChartStateComponent,
canActivateChild: [ChartGuardService],
children: [
    {
        path: 'one/:id',
        redirectTo: 'one/:id/profile',
        pathMatch: 'full'
    },
    {   path: 'one/:id/:tab',
        component: TestOneComponent
    },
    {   path: 'two/:id/:tab',
        component: TestTwoComponent
    },
    ...
],

或者，您可以構建路由防護器以處理更復雜的路由。 有關更多信息， 請參見此問題： Angular2條件路由

UPDATE

我不確定如何基於參數添加條件...但是可以基於全局變量添加條件。

在“全局”文件中：

 export class Globals {
    public static ISADMIN: boolean = false;
 }

在您的模塊路由定義中

  {
    path: 'products/:id',
    component: Globals.ISADMIN ?  ProductAdminComponent : ProductDetailComponent
  },