Angular中的动态父级和子级路由

时间:2019-04-28 21:00:23

标签: angular-ui-router angular6 angular-router

我有一种情况,我希望URL看起来像flavor/service,其中风味和服务可以具有任何价值。

基于选择的风味和服务的值,我需要动态显示数据。无论选择哪种口味和服务,我都必须在同一页面上显示数据。

我已经这样设置了路线:

{ path: ':flavor', component: DataComponent, children: [
      { path: ':service', component: DataComponent }
    ]
  }

它不起作用,有什么建议可以实现这一目标吗?我既可以有活力的父母,也可以有孩子?

2 个答案:

答案 0 :(得分:0)

在角度中不能产生没有静态,动态参数和静态路径的动态路线

您可以像这样配置您的路线

{ path: 'flavor/:flavor', component: DataComponent, children: [
      { path: 'service/:service', component: DataComponent }
    ]
  }

此处:flavor,:serive是动态文本

您可以通过activateRoute.params获取它

答案 1 :(得分:0)

您的要求可以完全解决:

您必须在子路径中使用:flavour:service

确切的路由配置。

{ 
    path: '',
    component: DataComponent,
    children: [
      {
        path: ':flavour',
        component: DataComponent,
        children: [
          {
            path: ':service',
            component: DataComponent,
          }
        ]
      }
    ] 
  }