首页 文章

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

提问于
浏览 次
1

我使用Angular 5.2.2（typescript）与Angular-CLI和.NET Core 2.0 .

我正在尝试动态地向我的应用程序添加其他路由 .

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

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

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

未捕获错误：提供程序解析错误：无法实例化循环依赖项！ ApplicationRef（“[ERROR - >]”）：在./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

angular typescript angular-routing angular5 angular-router

1 回答

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

    这应该工作 .

    回复于

相关问题