fix(module:tabs): update active router tab after tabs changed (#7649)

Author: laggage

components/tabs/demo/link-router.ts

@@ -1,12 +1,16 @@
 import { Component } from '@angular/core';
-import { RouterLink } from '@angular/router';
+import { Params, RouterLink } from '@angular/router';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzTabsModule } from 'ng-zorro-antd/tabs';
 
 @Component({
   selector: 'nz-demo-tabs-link-router',
-  imports: [RouterLink, NzTabsModule],
+  imports: [RouterLink, NzTabsModule, NzButtonModule],
   template: `
+    <div style="margin-bottom: 16px;">
+      <button nz-button (click)="newTab()">ADD</button>
+    </div>
     <nz-tabset nzLinkRouter>
       <nz-tab>
         <a *nzTabLink nz-tab-link [routerLink]="['.']" [queryParams]="{ tab: 'one' }" queryParamsHandling="merge">
@@ -32,7 +36,40 @@ import { NzTabsModule } from 'ng-zorro-antd/tabs';
         </a>
         Four.
       </nz-tab>
+      @for (tab of dynamicTabs; track tab.title) {
+        <nz-tab>
+          <a
+            *nzTabLink
+            nz-tab-link
+            [routerLink]="tab.routerLink"
+            [queryParams]="tab.queryParams ?? {}"
+            queryParamsHandling="merge"
+          >
+            {{ tab.title }}
+          </a>
+          {{ tab.content }}
+        </nz-tab>
+      }
     </nz-tabset>
   `
 })
-export class NzDemoTabsLinkRouterComponent {}
+export class NzDemoTabsLinkRouterComponent {
+  dynamicTabs: Array<{ title: string; content: string; queryParams?: Params; routerLink: string[] }> = [];
+
+  newTab(): void {
+    const { length } = this.dynamicTabs;
+    const newTabId = length + 1;
+    const title = `NewTab${newTabId}`;
+    this.dynamicTabs = [
+      ...this.dynamicTabs,
+      {
+        title,
+        content: title,
+        routerLink: ['.'],
+        queryParams: {
+          tab: newTabId
+        }
+      }
+    ];
+  }
+}

components/tabs/tabset.component.spec.ts

@@ -879,6 +879,66 @@ describe('NzTabSet', () => {
       expect(element.querySelectorAll('.ant-tabs-tabpane').length).toBe(1);
     }));
   });
+
+  describe('dynamic router tabs', () => {
+    let fixture: ComponentFixture<DynamicRouterTabsTestComponent>;
+    let router: Router;
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        providers: [
+          provideRouter([
+            {
+              path: '',
+              pathMatch: 'full',
+              redirectTo: 'one'
+            },
+            {
+              path: 'one',
+              component: DynamicRouterTabsTestComponent
+            },
+            {
+              path: 'two',
+              component: DynamicRouterTabsTestComponent
+            },
+            {
+              path: 'three',
+              component: DynamicRouterTabsTestComponent
+            }
+          ])
+        ]
+      });
+
+      router = TestBed.inject(Router);
+      fixture = TestBed.createComponent(DynamicRouterTabsTestComponent);
+    });
+
+    it('should update active tab when tabs changed', fakeAsync(() => {
+      fixture.detectChanges();
+      tick();
+      fixture.detectChanges();
+
+      router.initialNavigation();
+      tick();
+      fixture.detectChanges();
+
+      const comp = fixture.componentInstance;
+
+      router.navigate(['three']);
+      fixture.detectChanges();
+      tick();
+      fixture.detectChanges();
+
+      comp.tabs = comp.lazyTabs;
+      fixture.detectChanges();
+      tick();
+      fixture.detectChanges();
+      tick();
+
+      expect(comp.selectedIdx).toBe(2);
+      flush();
+    }));
+  });
 });
 
 @Component({
@@ -1139,6 +1199,42 @@ export class RouterTabsTestComponent {
   handleSelection(_event: number): void {}
 }
 
+@Component({
+  template: `
+    <nz-tabset nzLinkRouter [(nzSelectedIndex)]="selectedIdx" [nzLinkExact]="false">
+      @for (tab of tabs; track tab.title) {
+        <nz-tab>
+          <a *nzTabLink nz-tab-link [routerLink]="tab.route">{{ tab.title }}</a>
+          {{ tab.title }}
+        </nz-tab>
+      }
+    </nz-tabset>
+    <router-outlet></router-outlet>
+  `,
+  imports: [RouterLink, RouterOutlet, NzTabsModule],
+  standalone: true
+})
+export class DynamicRouterTabsTestComponent {
+  selectedIdx = 0;
+  tabs = [
+    {
+      title: 'one',
+      route: ['one']
+    },
+    {
+      title: 'two',
+      route: ['two']
+    }
+  ];
+  readonly lazyTabs = [
+    ...this.tabs,
+    {
+      title: 'three',
+      route: ['three']
+    }
+  ];
+}
+
 const routes: Routes = [
   {
     path: '',

components/tabs/tabset.component.ts

@@ -51,6 +51,7 @@ import {
 } from './interfaces';
 import { NzTabBodyComponent } from './tab-body.component';
 import { NzTabCloseButtonComponent } from './tab-close-button.component';
+import { NzTabLinkDirective } from './tab-link.directive';
 import { NzTabNavBarComponent } from './tab-nav-bar.component';
 import { NzTabNavItemDirective } from './tab-nav-item.directive';
 import { NZ_TAB_SET, NzTabComponent } from './tab.component';
@@ -251,6 +252,8 @@ export class NzTabSetComponent implements OnInit, AfterContentChecked, OnDestroy
   // We filter out only the tabs that belong to this tab set in `tabs`.
   @ContentChildren(NzTabComponent, { descendants: true })
   allTabs: QueryList<NzTabComponent> = new QueryList<NzTabComponent>();
+  @ContentChildren(NzTabLinkDirective, { descendants: true })
+  tabLinks: QueryList<NzTabLinkDirective> = new QueryList<NzTabLinkDirective>();
   @ViewChild(NzTabNavBarComponent, { static: false }) tabNavBarRef!: NzTabNavBarComponent;
 
   // All the direct tabs for this tab set
@@ -475,13 +478,14 @@ export class NzTabSetComponent implements OnInit, AfterContentChecked, OnDestroy
       if (!this.router) {
         throw new Error(`${PREFIX} you should import 'RouterModule' if you want to use 'nzLinkRouter'!`);
       }
-      this.router.events
-        .pipe(
-          takeUntil(this.destroy$),
+      merge(
+        this.router.events.pipe(
           filter(e => e instanceof NavigationEnd),
-          startWith(true),
           delay(0)
-        )
+        ),
+        this.tabLinks.changes
+      )
+        .pipe(takeUntil(this.destroy$), startWith(true))
         .subscribe(() => {
           this.updateRouterActive();
           this.cdr.markForCheck();
@@ -495,7 +499,7 @@ export class NzTabSetComponent implements OnInit, AfterContentChecked, OnDestroy
       if (index !== this.selectedIndex) {
         this.setSelectedIndex(index);
       }
-      this.nzHideAll = index === -1;
+      Promise.resolve().then(() => (this.nzHideAll = index === -1));
     }
   }