javascript - Angular 2 : How do I achieve selectability of a specific route config list based on a external value

Question

我正在尝试在一个 .ts 文件中使用两个不同的路由配置，该文件具有相同级别的路由和基于服务变量值的相同父路径。

条款是，如果外部设置变量的值为真，它将使用一个子路由列表，如果是另一个，则它将使用第二个列表。路由路径和层级相同。

例如:

父路由/parent...(非终端路由)然后在子路由配置中if service.value is true 那么它将使用下面的路由配置

@RouteConfig([
  {path: '/', component: ChildComponent, name: 'ChildCmp' },
  {path: '/test', component: SecComponent, name: 'SecCmp' },
  {path: '/tester', component: OptionalComponent, name: 'ThCmp' }
])

否则，如果 service.value 为 false，它将使用以下内容:

@RouteConfig([
  {path: '/', component: ChildComponent, name: 'ChildCmp' },
  {path: '/test', component: SecComponent, name: 'SecCmp' }
])

是否可以注入(inject)将配置列表路由到列表或提供基于service.value的if语句？关于如何实现路由配置的这种模块化或可选择性的任何想法？

Answer 1

您可以使用 Router#config这将使您能够动态配置路由。

所以就这么简单

class Child {
  config = [];
  constructor(public svc: Service, router: Router) {
    if(svc.value == 1) {
      this.config = [
        {path: '/', component: ChildComponent, name: 'ChildCmp' },
        {path: '/test', component: SecComponent, name: 'SecCmp' },
        {path: '/tester', component: OptionalComponent, name: 'ThCmp' }];
    }
    else if(svc.value == 2) {
      this.config = [
        {path: '/', component: ChildComponent, name: 'ChildCmp' },
        {path: '/test', component: SecComponent, name: 'SecCmp' }
        ];
    }

    // Set the config
    router.config(this.config);
  }
}

这是一个 plnkr以示例工作。切换服务中的值以查看值的变化。