Angular/PrimeNg动态路由与侧边栏实现技术问询

一、现有动态路由代码的集成步骤 #

如果你想沿用当前的动态路由思路，可以按以下步骤把代码整合到项目中：

1. 抽离静态路由并导出 #

在你的路由模块（比如app-routing.module.ts）中，将原有静态路由定义为可导出的变量：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
// 导入你的其他静态组件

// 定义并导出静态路由
export const staticRoutes: Routes = [
  { path: '', component: HomeComponent },
  // 其他静态路由配置
];

@NgModule({
  imports: [RouterModule.forRoot(staticRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 在应用初始化时加载动态路由 #

推荐使用APP_INITIALIZER在应用启动时提前加载动态路由，避免用户进入页面时出现路由未找到的错误。在app.module.ts中配置：

// app.module.ts
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { AppRoutingModule, staticRoutes } from './app-routing.module';
import { AppComponent } from './app.component';
import { RoutesService } from './services/routes.service';
import { AdminRolesComponent } from './admin-roles/admin-roles.component';

// 定义动态路由加载工厂函数
export function loadDynamicRoutes(router: Router, routesService: RoutesService) {
  return () => routesService.getRoutes().subscribe(routes => {
    const dynamicRoutes = routes.map(route => ({
      path: route.path,
      component: AdminRolesComponent
    }));
    // 合并静态与动态路由并重置配置
    router.resetConfig([...staticRoutes, ...dynamicRoutes]);
  });
}

@NgModule({
  declarations: [AppComponent, AdminRolesComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: loadDynamicRoutes,
      deps: [Router, RoutesService],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 动态生成PrimeNg侧边栏菜单 #

在组件（比如app.component.ts）中，从接口获取路由数据后生成侧边栏菜单：

// app.component.ts
import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';
import { RoutesService } from './services/routes.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  sidebarItems: MenuItem[] = [];

  constructor(private routesService: RoutesService) {}

  ngOnInit(): void {
    this.routesService.getRoutes().subscribe(routes => {
      this.sidebarItems = routes.map(route => ({
        label: route.menuName, // 假设接口返回菜单显示名称
        routerLink: [`/${route.path}`]
      }));
    });
  }
}

对应模板：

<!-- app.component.html -->
<p-sidebar>
  <p-menu [model]="sidebarItems"></p-menu>
</p-sidebar>
<router-outlet></router-outlet>

二、更简便的实现方案：参数化路由 #

不用每次修改路由配置，通过参数化路由复用组件，更简洁高效：

1. 配置参数化静态路由 #

在app-routing.module.ts中只需要添加一条带参数的路由：

export const staticRoutes: Routes = [
  // 其他静态路由
  { path: 'admin-roles/:routeKey', component: AdminRolesComponent }
];

2. 动态生成侧边栏菜单 #

接口返回的路径值作为路由参数传递：

// app.component.ts
ngOnInit(): void {
  this.routesService.getRoutes().subscribe(routes => {
    this.sidebarItems = routes.map(route => ({
      label: route.menuName,
      routerLink: [`/admin-roles/${route.path}`]
    }));
  });
}

3. 在组件中获取参数并展示对应数据 #

在AdminRolesComponent中通过ActivatedRoute获取路由参数，校验后加载对应数据：

// admin-roles.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DataService } from './services/data.service';

@Component({
  selector: 'app-admin-roles',
  templateUrl: './admin-roles.component.html'
})
export class AdminRolesComponent implements OnInit {
  currentRouteKey: string | null = null;
  data: any;

  constructor(
    private route: ActivatedRoute,
    private dataService: DataService
  ) {}

  ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      this.currentRouteKey = params.get('routeKey');
      // 根据路由参数请求对应数据
      if (this.currentRouteKey) {
        this.dataService.getDataByRouteKey(this.currentRouteKey).subscribe(res => {
          this.data = res;
        });
      }
    });
  }
}

这种方案无需动态修改路由配置，避免了router.resetConfig可能带来的路由状态问题，同时简化了逻辑。

内容的提问来源于stack exchange，提问作者Bet