在我的路由中创建动态路径 - Angular / PrimeNg 版本

Question

我需要在路由中动态创建多个路径，因为这些值将通过端点添加到侧边栏。

通过为侧边栏创建新项目，用户将为每个菜单指定路径值。

用户输入的路径值是应添加到路由中的值。

所有路径都将使用相同的组件，但要显示的数据由路径验证

loadDynamicRoutes() {
    this.routesService.getRoutes().subscribe((routes: any[]) => {
      const dynamicRoutes = routes.map(route => ({
        path: route.path,
        component: AdminRolesComponent
      }));

      this.router.resetConfig([...staticRoutes, ...dynamicRoutes]);
    });
  }

这是我的代码示例，但我不知道如何将其添加到路由中。

有没有更简单的方法让我的侧边栏和路径保持动态？

Answer 1

代码似乎工作正常，我们可以生成路径，然后使用

resetConfig

使路线动态化。请找到下面突出显示这种动态行为的工作示例（分叉）。

import { Component } from '@angular/core';
import { Router, Routes } from '@angular/router';
import { routes } from './app.routing.module';
import { Observable, of } from 'rxjs';
import { RouteOneComponent } from './route-one/route-one.component';
import { RouteTwoComponent } from './route-two/route-two.component';
import { RouteThreeComponent } from './route-three/route-three.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  routes = routes;

  constructor(private router: Router) {}

  ngOnInit() {
    // Initial routes
    console.log(this.routes);
    this.changeRouteConfig();
  }

  changeRouteConfig() {
    this.getUrl().subscribe((data: Routes) => {
      // Updated routes
      console.log(data);
      this.routes = data;
      this.router.resetConfig(data);
    });
  }

  getUrl(): Observable<Routes> {
    return of([
      { path: 'route-one', component: RouteOneComponent },
      { path: 'route-two', component: RouteTwoComponent },
      { path: 'route-three', component: RouteThreeComponent },
    ]);
  }
}

Stackblitz 演示（分叉 - 不是我做的）