ng-zorro-antd 的 tab 组件切换 tab 滞后的问题
0
悬赏园豆：30
[已解决问题]
解决于 2025-01-09 22:07
园子博客后台前端 tab 组件用的是 ng-zorro-antd 提供的 <nz-tabset>，采用的是 link with router 方式
<nz-tabset nzLinkRouter [nzLinkExact]="false" nzType="card" [(nzSelectedIndex)]="activeTabIndex">
<ng-container *ngFor="let tab of tabs">
<nz-tab *ngIf="tab.hidden !== true">
<ng-template nzTabLink>
<a nz-tab-link [routerLink]="tab.route" [state]="{ tab }">{{tab.name}}</a>
</ng-template>
</nz-tab>
</ng-container>
</nz-tabset>
一直有个问题，点击不同 tab 进行切换时，tab 的切换有些滞后(lagging)，似乎要等完成某些加载才将当前 tab 设置为 active 状态，尤其是部署后第一次访问，这个滞后很明显。
现在想尝试在 NavigationStart router event 发生时设置 nz-tabset 的 active tab，请问如何实现？
最佳答案
0
解决了！订阅 NavigationStart 事件，调用 setActiveTab 方法设置 active tab
async ngOnInit() {
this._router.events
.pipe(
filter(ev => ev instanceof NavigationStart),
debounceTime(100),
this._rxHelper.autoUnsubscribe
)
.subscribe((ev) => {
this.setActiveTab(ev.url)
});
}
setActiveTab 方法的实现代码
private setActiveTab(path: string) {
const pathname = trimEnd(path, '/');
const tabs = this.showingTabs;
for (let i = 0; i < tabs.length; i++) {
const tab = tabs[i];
if (tab.route[0] == pathname && this.activeTabIndex !== i) {
this.activeTabIndex = i;
this._changeDetector.markForCheck();
break;
}
}
}
使用 findIndex 重构了 setActiveTab 的实现代码
private setActiveTab(path: string) {
const pathname = trimEnd(path, '/');
const tabs = this.showingTabs;
const index = tabs.findIndex(t => t.route[0] === pathname);
if (index >= 0 && this.activeTabIndex !== index) {
this.activeTabIndex = index;
this._changeDetector.markForCheck();
}
}
对应的
– dudu 2天前<nz-tabset>开源实现代码 tabset.component.ts