如何基于Angular子路由切换同步NG-ZORRO Tab选中状态？

当然可以！这完全能通过ActivatedRoute和Router来实现，我帮你整理了一套靠谱的实现方案，直接套用就行：

核心思路 #

通过监听路由变化，将当前激活的子路由路径映射到对应的标签索引，同步更新nz-tabset的selectedIndex属性。同时在组件初始化时就处理好直接访问子路由的场景，确保页面加载时标签选中状态正确。

具体实现步骤 #

1. 组件类代码（my-component.component.ts）

先注入ActivatedRoute和Router，然后通过路由事件监听和初始化检查来同步索引：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  selectedIndex = 0;
  // 建立子路由路径和标签索引的映射，后续加新标签直接在这里扩展就行
  private routeIndexMap: Record<string, number> = {
    'routeOne': 0,
    'routeTwo': 1
  };

  constructor(private activatedRoute: ActivatedRoute, private router: Router) { }

  ngOnInit(): void {
    // 页面初始化时，先根据当前激活的子路由设置初始选中索引
    this.setInitialSelectedIndex();

    // 监听路由切换完成事件，每次路由变化后更新选中状态
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      this.updateSelectedIndex();
    });
  }

  private setInitialSelectedIndex(): void {
    // 获取当前激活的子路由路径片段
    const childRoutePath = this.activatedRoute.firstChild?.snapshot.url[0]?.path;
    if (childRoutePath && this.routeIndexMap[childRoutePath] !== undefined) {
      this.selectedIndex = this.routeIndexMap[childRoutePath];
    }
  }

  private updateSelectedIndex(): void {
    // 从路由根节点获取最新的子路由路径，确保路由切换后拿到的是最新状态
    const currentChildPath = this.router.routerState.root.firstChild?.firstChild?.snapshot.url[0]?.path;
    if (currentChildPath && this.routeIndexMap[currentChildPath] !== undefined) {
      this.selectedIndex = this.routeIndexMap[currentChildPath];
    }
  }
}

2. 模板代码（my-component.component.html）

把selectedIndex绑定到nz-tabset，同时标签标题用routerLink跳转到对应子路由：

<nz-tabset [selectedIndex]="selectedIndex">
  <nz-tab>
    <nz-tab-heading>
      <a [routerLink]="['./routeOne']">标签页一</a>
    </nz-tab-heading>
  </nz-tab>
  <nz-tab>
    <nz-tab-heading>
      <a [routerLink]="['./routeTwo']">标签页二</a>
    </nz-tab-heading>
  </nz-tab>
  <!-- 子路由内容渲染区域 -->
  <router-outlet></router-outlet>
</nz-tabset>

关键细节说明 #

• 路由映射表：用routeIndexMap统一管理路由和索引的对应关系，后续新增标签或修改路由路径时，只需要更新这个对象，不用到处改代码，维护起来更方便。
• 初始化处理：setInitialSelectedIndex方法确保用户直接访问子路由（比如http://.../123/routeTwo）时，页面加载就能自动选中对应的标签。
• 路由事件监听：选择NavigationEnd事件是因为它是路由切换完全完成后的事件，能避免路由过程中多次触发更新导致的状态不稳定问题。

这样不管是通过点击标签切换路由，还是直接输入子路由URL访问，标签的选中状态都能和当前路由完美同步啦！

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