Question

我使用Angular 5.2.2（typescript）和Angular-CLI以及.NET Core 2.0。

我正在尝试动态添加其他路由到我的应用程序。

我的想法是，我从服务器动态获取我的路由，该服务器检查用户可以使用哪些模块。但我似乎无法让路线变得可用。

我曾尝试使用RouterModule.forRoot添加它们，但这不起作用。

我尝试过使用Router.resetConfig，但我似乎无法正常工作。我尝试使用依赖注入来获取它在我创建的函数中但最终得到循环依赖：

未捕获错误：提供程序解析错误：无法实例化循环依赖！ ApplicationRef（“[ERROR - ＆gt;]”）：在./AppModule@-1：1中的NgModule AppModule中

以下是我的一些代码：

APP-routing.module.ts

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { Routes, RouterModule, Router } from '@angular/router';

var routes: Routes = [{ path: '', loadChildren: "../app/modules/f2p-dashboard/f2p-dashboard.module#F2PDashboardModule" }];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: AppConfigServiceFactory,
      deps: [F2PModuleService, Router ],
      multi: true
    }
  ]
})

export function AppConfigServiceFactory(moduleService: F2PModuleService, 
router:Router) {
  return () => {
    return moduleService.Init().subscribe((result) => {
      let additionalRoutes = moduleService.GetRoutes()
      routes = routes.concat(additionalRoutes);
      console.log(routes);
      //routes is filled
  router.resetConfig(routes);
  //RouterModule.forRoot(routes);
});

编辑：我试图添加的所有路由都使用了loadChildren

Answer 1

其中一种方法是将路由推入路由器并使用resetConfig。

Example :
constructor(private router: Router, private route: ActivatedRoute) {}
   const config = this.router.config;
   config.push({
            path: 'dynamicRoutePath',
            component: DynamicRouteComponent,
        });
        this.router.resetConfig(config);
        this.router.navigate(['dynamicRoutePath'], {relativeTo: this.route});

这应该有效。

如何在Angular中动态添加其他路由

1 个答案: