如何访问 matTabNavBar.updateActiveLink 方法

how to access matTabNavBar.updateActiveLink method

MatTabNav Docs show a method that can be used to update the active links for a mat-tab-nav. No examples of how to implement this seem to exist and the 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 ) 所以我试图在 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' },

不确定这是否有帮助,因为我没有带有路由设置的 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 并触发更改检测。

查看源代码的其他地方似乎这个变量会做一些事情,比如将墨迹栏与活动 link 已更改的选项卡对齐...因为我没有设置 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;
    }
  }

您可以使用 @ViewCild@ViewChildren 查询来获取 MatTabNavMatTabLink 元素,方法是通过 类 而不是这样的名称进行查询:

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

要从您需要的代码中更改 selection,然后在当前 selected link 上设置 active false 并在 select 上设置为 true荷兰国际集团之后调用方法 updateActiveLink。要传递的 ElementRef 是新 selected MatTabLink 的元素 ref。这是一个示例方法,selects 第二个 link 用于演示:

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

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

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

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

这是执行此操作的示例的 link。您不能混合使用这两种方法,因为绑定会覆盖您从代码中执行的操作。