路由器的动态设置

Question

我有一个Angular 5应用程序，可以从Contentful中检索内容。其中一些内容是路线。我想在子RoutingModule内设置如下：

const myRoutes: Routes = [
  { path: '', component: BaseComponent },
  { path: '**', component: FailComponent }
];

@NgModule({ 
  RouterModule.forChild(myRoutes),
  ... 
})

export class MyRoutingModule {
  routesFromContentful = retrieveRoutesFromContentful();
  routes.forEach((route:string) => {
    myRoutes.push({ path: route, component: GenericComponent }); 
  }
}

要明确：

1. 我将所有路由映射到同一个组件GenericComponent。这是有目的的。
2. 从Contentful中检索路由没有问题。
3. 问题是我推入myRoutes的新路线无法识别。

有没有办法识别这些路线？它们是否被识别，因为导出的类位于@NgModule之后？

Answer 1

要将路由推送到当前路由配置，您可以通过在router依赖项实例上调用方法来推送这些路由，如下所示。

export class MyRoutingModule {
  constructor(private router: Router){
     this.loadRoutes();
  }

  loadRoutes(){
     routesFromContentful = retrieveRoutesFromContentful();
     routes.forEach((route:string) => {
        myRoutes.push({ path: route, component: GenericComponent }); 
     }
     //reseting router configuration
     this.router.resetConfig(routes);
  } 
}

或者您可以直接在router.config对象中推送新路由。

export class MyRoutingModule {
  constructor(private router: Router){
     this.loadRoutes();
  }

  loadRoutes(){
     routesFromContentful = retrieveRoutesFromContentful();
     routes.forEach((route:string) => {
        //adding routes to existing to configuration.
        this.router.config.push({ path: route, component: GenericComponent }); 
     }
  } 
}