routeParams 更改后如何更改 mat-tab？

Question

我正在尝试重置 mat-tab-group 以在 routeParams 更改时将第一个选项卡设置为活动状态。

ts 文件：

public index = 0;

ngOnInit() {
  this.subscription = this.route.params.subscribe((routeParams: Params) => {
    // some code

    this.index = 0;
  });
}

html 文件

<mat-tab-group [selectedIndex]="index">
  <mat-tab></mat-tab>
  <mat-tab>
    <a [routerLink]="['/url/2']"></a>
  </mat-tab>

在第二个选项卡中，我有一个指向另一张卡的路由器链接 - 因此，当路由器导航到此卡组件时，不会重新加载（路由是 /url/:id）。 但是第一个选项卡没有变为活动状态 - 即使我在路由参数的订阅中设置了索引。

Answer 1

我做到了。 原因是 selectedIndex 的两种方式绑定。

https://github.com/angular/material2/issues/10282

我设置了<mat-tab-group [(selectedIndex)]="index"> 而不是<mat-tab-group [selectedIndex]="index">，它可以工作。

所以，当我通过 routerLink 从一张卡的第二个选项卡转到另一张卡时，新卡的第一个选项卡将变为活动状态。