Angular 不包括组件如何使用异步路由，或如何动态路由@RouteConfig中的外接程序

任何人都可以帮助我用typescript编写angular2@RouteConfig

---

在文件顶部不包含组件，在ts文件中不包含System.import意味着如何动态路由外接程序@RouteConfig form component class

您可以利用

异步

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

以下是一个示例：

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

请参阅以下链接：

我自己没试过

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

---

我还想动态导入组件