2

MatTabNav Docs展示了一种可用于更新mat-tab-nav. 似乎不存在如何实现这一点的示例，源代码也没有更好地了解如何实现。

这是我的模板中的 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在 custructor 中导入并像这样访问它_matTabNav.updateActiveLink( this.tabs )

constructor(
  private _matTabNav: MatTabNav,
) { }

我的最终目标

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

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

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

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

2 回答 2

1

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

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

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

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

这里也是StackBlitz 中工作示例的链接。

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

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

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

于 2018-11-08T00:16:50.717 回答
0

不确定这是否会有所帮助，因为我没有带有路由设置的 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…

从这里我怀疑你需要传递一个 elementRefmat-tab-link因为源中的这个方法似乎更新私有变量_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;
    }
  }
于 2018-11-08T00:14:05.233 回答