如何访问 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
查询来获取 MatTabNav
和 MatTabLink
元素,方法是通过 类 而不是这样的名称进行查询:
@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。您不能混合使用这两种方法,因为绑定会覆盖您从代码中执行的操作。
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
查询来获取 MatTabNav
和 MatTabLink
元素,方法是通过 类 而不是这样的名称进行查询:
@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。您不能混合使用这两种方法,因为绑定会覆盖您从代码中执行的操作。