Question

任何人都可以帮我用typescript编写angular2 @RouteConfig 没有包含在文件顶部的组件且ts文件中没有System.import意味着如何在@RouteConfig表单组件类中添加动态路由

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)

不包含组件如何使用异步路由，或者如何动态路由添加@RouteConfig

1 个答案: