Question

也许有人知道如何动态构建路线（或者只是动态导入组件）。

例如：

我有包含RouteName，path，ComponentNames（string）的对象的JSON。我想迭代它并动态构建路由定义（路由配置）。但我不知道如何进行动态组件导入。我可以传递字符串＆＃34; ComponentName＆＃34;从JSON到导入规则，因为import需要静态定义（从google搜索到某些源）。

失败

let a = "MyComponentName"
import {a} from ......

（我提出的一个想法 - s like create some map key-value, and keep into key - route, value - Component, and after that equals routename from JSON and my MAP and push needed component into final route config array. But it如此丑陋的解决方案）也许存在另一种方式？

我卡住了。非常感谢任何帮助......

Answer 1

您可以利用Async路由来执行此操作。根据您的路由配置，您可以从模块加载路由。在这种情况下，您需要添加模块路径以获取与路径关联的组件。

以下是一个示例：

var routes = {
  path: '/path',
  name: 'some name',
  module: './my.component',
  component: 'MyComponentName'
}
routes.forEach((route : any) => {
  this.routeConfigArray.push(
      new AsyncRoute({
          path : route.path,
          loader : () => System.import(route.module).then(m => m[route.component]),
          name : route.name
      });
  );
});

this._router.config(this.routeConfigArray);

另一种方法可能是添加一个函数来获取函数的名称。基于此，您可以检查您是否有匹配的潜在组件。

以下是一个示例：

ngOnInit() {
  this.routes = [
    {
      path: '/test', component: 'OtherComponent', name: 'Test'
    }
  ];
  this.configureRoutes(this.routes);
  this.router.config( this.routes);
}

configureRoutes(routes) {
  var potentialComponents = [ OtherComponent ];
  routes.forEach((route) => {
    route.component = potentialComponents.find((component) => {
      return component.name === route.component;
    });
  });
}

请参阅此plunkr：https://plnkr.co/edit/KKVagp?p=preview。

有关详细信息，请参阅此问题：

Dynamic Route Loading in Angular 2 Fails. (Beta)

Answer 2

https://github.com/angular/angular/issues/11437#issuecomment-245995186提供 RC.6 Plunker

<强>更新

在新路由器中>= RC.3）https://angular.io/docs/js/latest/api/router/index/Router-class.html#!#resetConfig-anchor resetConfig可以使用

router.resetConfig([
 { path: 'team/:id', component: TeamCmp, children: [
   { path: 'simple', component: SimpleCmp },
   { path: 'user/:name', component: UserCmp }
 ] }
]);

<强>原始

应该做些什么

import from 'myComponents' as myComponents;

...

someFunc(name:string) {
  console.debug(myComponents[name]);
}

可以使用

加载路线

constructor(private router:Router) { }

someFunc() {
  this.router.config([
    { 'path': '/', 'component': IndexComp },
    { 'path': '/user/:id', 'component': UserComp },
  ]);
}

我自己没有试过这个。

另请参阅此相关问题Angular2 App Routing through Services

动态构建路由{或动态组件导入} Angular 2

2 个答案: