Angular 10 材质选项卡：根据路由参数选择选项卡？

Question

我有一个带有mat-tab-group 的页面，它位于/transactions 的路线上。

      <mat-tab-group>
        <mat-tab label="Shipments">
          <ng-template matTabContent>
            shipment content
          </ng-template>
        </mat-tab>
        <mat-tab label="Refunds">
          <ng-template matTabContent>
            Refund content
          </ng-template>
        </mat-tab>
        <mat-tab label="Backorders">
          <ng-template matTabContent>
            Backorders content
          </ng-template>
        </mat-tab>
     </mat-tab-group>

我希望能够选择使用路由参数显示哪个选项卡，以便我可以链接到/transactions/refunds 或/transactions/?type='refunds' 或类似的东西，并导航到相应选项卡处于活动状态的交易页面。

Answer 1

在这种情况下，请使用 mat-tab-group 的 selectedIndex 输入（请参阅https://material.angular.io/components/tabs/api）。

整体概念可能如下所示。

在 .html 中：

<mat-tab-group [selectedIndex]="selectedIndex">

在 .ts 中：

selectedIndex = 0;

navItems = [
    { label: 'Label 1', route: '/route1' },
    { label: 'Label 2', route: '/route2' }
];

  constructor(private router: Router) {
    this.router.events.pipe(
        filter((event) => event instanceof NavigationEnd)
    ).subscribe(
        () => (
          this.selectedIndex = this.navItems.findIndex(
            nav => nav.route === this.router.url
          )
      )
    );
  }