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

Question

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

例如：

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

失败

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

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-anchorresetConfig可以使用

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

Answer 2

您可以利用 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。

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

Answer 3

说。三个屏幕作为 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);

trick 是 .bind(this)，这是 vanella javscript 对于整个解决方案，请检查此动态加载 Angular 2 异步路由器 https://github.com/Longfld/DynamicalAsyncRouter

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

Dynamic build routes {or dynamic component import} Angular 2

import

components

routes

dynamic

angular