【问题标题】：how to access matTabNavBar.updateActiveLink method如何访问 matTabNavBar.updateActiveLink 方法
【发布时间】：2018-11-08 08:16:50
【问题描述】：

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;

第二次尝试失败

@ViewChild( 'MatTabNav' ) tabs: MatTabNav;

令人困惑的是，它表明我需要将对元素的引用传递给 this.something.updateActiveLink( this.tabs ) 项，因此我尝试在 custructor 中导入 MatTabNav 并像 _matTabNav.updateActiveLink( this.tabs ) 那样访问它

constructor(
  private _matTabNav: MatTabNav,
) { }

我的最终目标

当路线不包含我的标签时，我打算突出显示第一个链接。此外，当路线发生变化时，我希望标签反映这种变化。所以第一行最终会选择相同的

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

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

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

【问题讨论】：

标签： angular angular-material angular7 angular-cdk

【解决方案1】：

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

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

要从代码中更改选择，您需要在当前选择的链接上设置活动 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);
}

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

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

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

这是一个link 的示例。您不能混合使用这两种方法，因为绑定会覆盖您在代码中所做的操作。

【讨论】：

【解决方案2】：

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

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

添加模板引用

<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 并触发更改检测。

在源代码的其他地方查看似乎这个变量会做一些事情，比如将墨条对齐到活动链接已更改的选项卡......因为我没有设置 stackblitz，我无法验证这部分的任何内容对您来说，分析完全基于源代码审查...希望其中的一些分析会有所帮助。

/** 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;
    }
  }

【讨论】：