Angular中可否实现不同顶部菜单对应各自统一的左侧菜单

该需求完全可以在Angular中实现，以下是两种常用的落地方案：

方案1：路由嵌套+布局组件（推荐） #

适合顶部菜单切换时需要跳转路由的场景，也是Angular官方推荐的布局拆分思路：

• 为每一组顶部菜单定义独立的布局组件，布局内直接写死对应要展示的左侧菜单
• 归属同一顶部菜单的所有业务页面都配置为该布局路由的子路由，统一挂载到布局的router-outlet中

路由配置示例：

// app-routing.module.ts
const routes: Routes = [
  // 顶部菜单A分组：所有子页面共用左侧菜单A
  {
    path: 'product-module',
    component: ProductLayoutComponent,
    children: [
      { path: 'list', component: ProductListComponent },
      { path: 'detail/:id', component: ProductDetailComponent }
    ]
  },
  // 顶部菜单B分组：所有子页面共用左侧菜单B
  {
    path: 'order-module',
    component: OrderLayoutComponent,
    children: [
      { path: 'list', component: OrderListComponent },
      { path: 'setting', component: OrderSettingComponent }
    ]
  }
]

布局组件模板示例：

<!-- product-layout.component.html -->
<app-top-header></app-top-header> <!-- 公共顶部导航栏 -->
<div class="layout-container">
  <app-product-left-menu></app-product-left-menu> <!-- 商品模块专属左侧菜单 -->
  <div class="page-content">
    <router-outlet></router-outlet> <!-- 子业务页面挂载位 -->
  </div>
</div>

方案2：状态服务动态渲染 #

适合顶部菜单切换不需要跳转路由的单页场景：

• 定义全局菜单服务存储当前激活的顶部菜单标识
• 左侧菜单组件订阅标识变化，动态渲染对应的菜单列表
• 顶部菜单切换时更新服务中的标识即可自动刷新左侧菜单

服务代码示例：

// menu.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class MenuService {
  // 存储当前激活的顶部菜单标识，默认值可自定义
  activeTopMenu = new BehaviorSubject<'product' | 'order'>('product');
}

左侧菜单组件逻辑示例：

// left-menu.component.ts
import { Component } from '@angular/core';
import { MenuService } from './menu.service';
import { map } from 'rxjs';

// 定义两套左侧菜单配置
const PRODUCT_MENU = [{name: '商品列表', path: '/product-module/list'}, {name: '分类管理', path: '/product-module/category'}];
const ORDER_MENU = [{name: '订单列表', path: '/order-module/list'}, {name: '物流配置', path: '/order-module/logistics'}];

@Component({
  selector: 'app-left-menu',
  template: `
    <ul>
      <li *ngFor="let menu of menuList$ | async" [routerLink]="menu.path">{{menu.name}}</li>
    </ul>
  `
})
export class LeftMenuComponent {
  menuList$ = this.menuService.activeTopMenu.pipe(
    map(menuType => menuType === 'product' ? PRODUCT_MENU : ORDER_MENU)
  );
  constructor(private menuService: MenuService) {}
}

效果参考 #

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