Angular6路由-根据父路由参数设置子路由组件

Question

我的 Angular6 项目中有以下路由配置。

    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 是父路径的参数，它可以有 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
    },
    ...
],

或者，您可以构建路由守卫来处理更复杂的路由。有关详细信息，请参阅此问题：

更新

我不确定如何添加基于参数的条件...但是您可以添加基于全局变量的条件。

在 "Globals" 文件中：

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

在你的模块路由定义中

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

Angular6路由-根据父路由参数设置子路由组件

Angular 6 routing - setting children route component based on parent route parameters

angular-routing

angular