Dynamic 动态生成路由{或动态组件导入}2

也许任何人都知道如何动态构建路由（或者只是动态导入组件）

例如：

我有JSON，它包含带有RouteName、path、ComponentName（字符串）的对象。 我想迭代它并动态构建路由定义（路由配置）。但我不知道，如何进行动态组件导入。 我可以将JSON中的字符串“ComponentName”传递给导入规则，因为导入需要静态定义（通过谷歌搜索找到）

失败

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

（我提出的一个想法是，创建一些map键值，保留key-route、value-Component，之后等于JSON和我的map中的routename，并将所需的组件推到最终的route-config数组中。但它是如此丑陋的解决方案）可能存在另一种方法

我卡住了。非常感谢您的帮助….

提供了一个RC.6Plunker

更新

在新路由器中（

=RC.3

）

resetConfig

可以使用

router.resetConfig([
{路径：'team/：id'，组件：TeamCmp，子项：[
{path:'simple'，组件：SimpleCmp}，
{path:'user/：name'，component:UserCmp}
] }
]);

原创

应该起作用的是

作为myComponents从“myComponents”导入；
...
someFunc（名称：string）{
调试（myComponents[name]）；
}

可以使用

构造函数（专用路由器：路由器）{}
someFunc（）{
此文件为.router.config([
{'path'：'/'，'component'：IndexComp}，
{'path'：'/user/：id'，'component'：UserComp}，
]);
}

我自己没试过

---

另请参见此相关问题

您可以利用

异步

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

以下是一个示例：

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;
    });
  });
}

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

以下是一个示例：

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;
    });
  });
}

请参阅以下链接：

有关更多详细信息，请参见此问题：

---

说吧。三个屏幕分别为page1、page2和page3，组件分别为app/page1.ts、app/page2.ts和app/page3.ts

       let screens : Array<string> = ["Page1","Page2","Page3"];
       let aRouter : RouteDefinition;
       this.routes = new Array<RouteDefinition>();
       screens.map(function(screenId){
           aRouter = new AsyncRoute({
                path: "/" + screenId,
                name: screenId,
                loader: () =>  System.import("app/" + screenId).then(c => c[screenId]) // not  import {page1, page2, page3}}
            });
            this.routes.push(aRouter);
       }.bind(this));  //we need to bind to current "this" instead of global this
        this.router.config(this.routes);

let屏幕：数组=[“第1页”、“第2页”、“第3页]；
let aRouter：常规定义；
this.routes=新数组（）；
screens.map（函数（screenId）{
aRouter=新的异步路由({
路径：“/”+屏幕ID，
姓名：screenId，
加载程序：（）=>System.import（“app/”+screenId）。然后（c=>c[screenId]）//不导入{page1，page2，page3}
});
这个。路径。推（aRouter）；
}.约束（这个）//我们需要绑定到当前的“this”，而不是全局的this
this.router.config（this.routes）；

诀窍是.bind（这个），这是vanella的脚本 对于整个绝缘，请检查此项 动态加载Angular 2异步路由器

---

不鼓励只链接答案。请将相关部分直接添加到答案中（代码示例、解释等）看起来不错。谢谢）似乎还支持为即将到来的单个组件更新路由。每当我尝试添加多个路由时，我都无法使其工作。this.routes=[{path:'/test'，component:'OtherComponent'，name:'test'}，{path:'/test2'，component:'OtherComponent2'，name:'test2'}]；