angular - 如何访问 matTabNavBar.updateActiveLink 方法

Question

MatTabNav Docs展示一种可用于更新 mat-tab-nav 事件链接的方法。似乎不存在如何实现这一点的示例，并且 source code没有更好地了解如何实现。

这是我的模板中的 html:

<nav mat-tab-nav-bar #tabs>
  <a mat-tab-link *ngFor="let link of links"
    (click)="activelink = link.identifier"
    [active]="activelink === link.identifier"
    [routerLink]="[ './', link.identifier ]"
  >{{ link.title }}</a>
</nav>

我尝试使用以下两个示例访问该方法，但是似乎没有一个示例允许我访问 this.tabs 上的 updateActiveLink 方法。

尝试 1 失败

@ViewChild( 'tabs' ) tabs: MatTabNav;

尝试 2 失败

@ViewChild( 'MatTabNav' ) tabs: MatTabNav;

令人困惑的是，它显示我需要将对元素的引用传递给项目 this.something.updateActiveLink( this.tabs ) 所以我尝试导入 MatTabNav 在 custructor 中并像这样访问它 _matTabNav.updateActiveLink( this.tabs )

constructor(
  private _matTabNav: MatTabNav,
) { }

我的最终目标

当路线不包含我的选项卡时，我打算突出显示第一个链接。此外，当路线更改时，我希望选项卡能够反射(reflect)此更改。所以第一行最终将选择相同的

/route/
/route/tab1
/route/tab2
/route/tab3

我的路由都路由到同一个组件

{ component: MyTabComponent,       path: 'route/'     },
{ component: MyTabComponent,       path: 'route/:tab' },

Answer 1

您可以通过使用 @ViewCild 和 @ViewChildren 查询来获取 MatTabNav 和 MatTabLink 元素通过类而不是这样的名称:

@ViewChild(MatTabNav) matTabNav: MatTabNav;
@ViewChildren(MatTabLink) linkElements: QueryList<MatTabLink>;

要更改代码中的选择，您需要将当前选定的链接设置为 active false，并将您选择的链接设置为 true。之后调用方法updateActiveLink。要传递的 ElementRef 是新选择的 MatTabLink 的元素引用。下面是选择第二个链接进行演示的示例方法:

selectSecondLink() {
  const matTabLinks: MatTabLink[] = this.linkElements.toArray()
  matTabLinks[0].active = false;
  matTabLinks[1].active = true;
  this.matTabNav.updateActiveLink(matTabLinks[1]._elementRef);
}

这里还有一个link StackBlitz 中的工作示例。

要使这一切正常工作，您还需要删除 [active] 上的绑定(bind)。如果您使用绑定(bind)，则无需执行所有这些操作，只需将 activeLink 属性设置为您要选择的链接标识符，它将自动更新。例如这样:

changeSelection() {
  this.activeLink = this.links[1].identifier;
}

这是一个link到执行此操作的示例。您不能混合使用这两种方法，因为绑定(bind)将覆盖您在代码中所做的操作。