typescript - Hur man lägger till ytterligare rutter dynamiskt i Angular

Jag använder Angular 5.2.2 (TypeScript) med Angular-CLI och .NET Core 2.0.

Jag försöker lägga till ytterligare rutter dynamiskt till min applikation.

Idén är att jag ska få mina rutter dynamiskt från en server som kontrollerar vilka moduler som ska vara tillgängliga för användaren. Men jag verkar inte kunna få rutterna att bli tillgängliga.

Jag har försökt att lägga till dem med RouterModule.forRoot men det fungerade inte.

Jag har försökt använda Router.resetConfig men jag verkar inte få det att fungera. Jag försöker använda beroendeinjektion för att få det i funktionen jag har skapat, men jag slutar med ett cykliskt beroende:

Uncaught Error: Provider parse errors:
Cannot instantiate cyclic dependency! ApplicationRef ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1

Här är en bit av koden jag har:

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

redigera: Alla rutter jag försöker lägga till använder loadChildren

Svar #1

Ett av sätten att göra detta är genom att trycka in rutten i routern och använda 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});

Detta borde fungera.

Relaterade artiklar