我的最终目标

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>

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

尝试失败1

@ViewChild( 'tabs' ) tabs: MatTabNav;

尝试2失败

@ViewChild( 'MatTabNav' ) tabs: MatTabNav;

令人困惑的是，它表明我需要将对元素的引用传递给项目this.something.updateActiveLink( this.tabs )，因此我试图将MatTabNav导入到构造器中并像这样{{1} }

_matTabNav.updateActiveLink( this.tabs )

我的最终目标

当路线不包含我的标签时，我打算突出显示第一个链接。另外，当路线改变时，我希望这些标签能够反映出这种变化。因此，第一行将最终选择相同的

constructor(
  private _matTabNav: MatTabNav,
) { }

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

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

Answer 1

通过使用MatTabNav和MatTabLink查询，可以通过类而不是类似的名称查询来获取@ViewCild和@ViewChildren元素：

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

要从代码中更改选择，则需要在当前选定的链接上将active设置为false，在所选择的链接上将其设置为true。之后，调用方法updateActiveLink。要传递的ElementRef是新选择的MatTabLink的元素ref。这是一个示例方法，它选择第二个链接进行演示：

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

这也是StackBlitz中工作示例的link。

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

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

这里是执行此操作的示例的link。您不能同时使用这两种方法，因为绑定会覆盖您在代码中所做的事情。

Answer 2

不确定这是否会有所帮助，因为我没有带有路由设置的stackblitz示例来进一步测试它，但这是我在此处tab-nav-bar-basic-example.ts使用标签导航栏示例访问此方法的方式

可以通过mat-tab-nav-bar来访问该方法，如下所示。

添加templateRef

<nav #navBar mat-tab-nav-bar [backgroundColor]="background">

然后使用ref设置ViewChild

@ViewChild('navBar') _navBar:any

然后console.log(this._navBar.updateActiveLink);产生以下输出。

ƒ (element) {
        // Note: keeping the `element` for backwards-compat, but isn't being used for anything.
        // @breaking-change 8.0.0
        this._activeLinkChanged = !!element;
        this…

我怀疑从这里开始，您需要传递mat-tab-link的elementRef，因为源中的此方法似乎会更新私有变量_activeLinkChanged并触发更改检测。

在源代码中的其他地方似乎可以看到，此变量将执行以下操作，例如将墨水栏与活动链接已更改的选项卡对齐...因为我没有安装程序，所以我无法验证这部分内容对您来说，分析完全基于源代码审查...希望其中的一些分析会有所帮助。

/** Checks if the active link has been changed and, if so, will update the ink bar. */
  ngAfterContentChecked(): void {
    if (this._activeLinkChanged) {
      const activeTab = this._tabLinks.find(tab => tab.active);

      this._activeLinkElement = activeTab ? activeTab._elementRef : null;
      this._alignInkBar();
      this._activeLinkChanged = false;
    }
  }

如何访问matTabNavBar.updateActiveLink方法

尝试失败1

尝试2失败

我的最终目标

2 个答案: