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>

我希望能够选择显示带有route参数的选项卡，以便我可以链接到/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
          )
      )
    );
  }

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

1 个答案: