Angular2：如何根据外部值实现特定路由配置列表的选择性

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' }
])

else if service.value is 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 示例。切换服务中的值以查看值的变化。

Angular2：如何根据外部值实现特定路由配置列表的选择性

Angular2: How do I achieve selectability of a specific route config list based on a external value

javascript

architecture

angular

angular2-routing