Angular Material动态标签页中侧边栏仅首个标签页生效问题

问题根源 #

• 所有动态生成的mat-tab内的sidenav共享了同一个sidenav.service的全局状态，没有为每个tab的sidenav分配独立标识
• *ngFor创建tab时，sidenav的引用默认绑定到首个实例，后续tab的切换事件无法关联到自身的sidenav实例

解决方案 #

1. 给每个tab添加唯一标识 #

在app组件中为每个tab项配置唯一ID（可用业务ID或循环索引）：

// app.component.ts
tabs = [
  { id: 'tab-1', title: '标签页1', content: '主内容1' },
  { id: 'tab-2', title: '标签页2', content: '主内容2' },
  // 更多标签页...
];

2. 改造SidenavService支持多实例状态管理 #

将服务的单一布尔状态改为对象，存储每个tab对应的sidenav展开状态：

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

@Injectable({ providedIn: 'root' })
export class SidenavService {
  private sidenavStates$ = new BehaviorSubject<Record<string, boolean>>({});

  getSidenavState(tabId: string) {
    return this.sidenavStates$.pipe(
      map(states => states[tabId] ?? false) // 默认未展开
    );
  }

  toggleSidenav(tabId: string) {
    const currentStates = this.sidenavStates$.value;
    this.sidenavStates$.next({
      ...currentStates,
      [tabId]: !currentStates[tabId]
    });
  }
}

3. 关联tab与sidenav的唯一标识 #

在app组件模板中，把tab的ID传递给子组件，绑定对应sidenav的状态：

<!-- app.component.html -->
<mat-tab-group>
  <mat-tab *ngFor="let tab of tabs" [label]="tab.title">
    <mat-sidenav-container>
      <mat-sidenav 
        [opened]="sidenavService.getSidenavState(tab.id) | async"
        mode="side"
      >
        <app-sidenav></app-sidenav>
      </mat-sidenav>
      <mat-sidenav-content>
        <app-header [tabId]="tab.id"></app-header>
        <app-content [content]="tab.content"></app-content>
      </mat-sidenav-content>
    </mat-sidenav-container>
  </mat-tab>
</mat-tab-group>

4. 修改Header组件传递tabID #

让Header组件接收tabID输入，点击切换时调用服务对应方法：

// header.component.ts
import { Component, Input } from '@angular/core';
import { SidenavService } from '../sidenav.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html'
})
export class HeaderComponent {
  @Input() tabId!: string;

  constructor(private sidenavService: SidenavService) {}

  toggleSidenav() {
    this.sidenavService.toggleSidenav(this.tabId);
  }
}

<!-- header.component.html -->
<button (click)="toggleSidenav()">切换侧边栏</button>
<!-- 其他头部内容 -->

额外提示 #

• 若使用fixedInViewport属性，需配合tab的激活状态控制sidenav显示，避免互相覆盖
• 大量tab场景下，可在tab切换时清理未激活tab的状态，减少内存占用

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