fix(module:tabs): router link content projection error

NG-ZORRO · Aug 11, 2020 · 8484164 · 8484164
1 parent f5899ad
commit 8484164
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 28 deletions.
diff --git a/components/tabs/demo/link-router.ts b/components/tabs/demo/link-router.ts
@@ -5,19 +5,19 @@ import { Component } from '@angular/core';
   template: `
     <nz-tabset nzLinkRouter>
       <nz-tab>
-        <a nz-tab-link [routerLink]="['.']" [queryParams]="{ tab: 'one' }" queryParamsHandling="merge">Default</a>
+        <a *nzTabLink nz-tab-link [routerLink]="['.']" [queryParams]="{ tab: 'one' }" queryParamsHandling="merge">Default</a>
         Default.
       </nz-tab>
       <nz-tab>
-        <a nz-tab-link [routerLink]="['.']" [queryParams]="{ tab: 'two' }" queryParamsHandling="merge">Two</a>
+        <a *nzTabLink nz-tab-link [routerLink]="['.']" [queryParams]="{ tab: 'two' }" queryParamsHandling="merge">Two</a>
         Two.
       </nz-tab>
       <nz-tab>
-        <a nz-tab-link [routerLink]="['.']" [queryParams]="{ tab: 'three' }" queryParamsHandling="merge">Three</a>
+        <a *nzTabLink nz-tab-link [routerLink]="['.']" [queryParams]="{ tab: 'three' }" queryParamsHandling="merge">Three</a>
         Three.
       </nz-tab>
       <nz-tab>
-        <a nz-tab-link [routerLink]="['.']" [queryParams]="{ tab: 'four' }" queryParamsHandling="merge">Four</a>
+        <a *nzTabLink nz-tab-link [routerLink]="['.']" [queryParams]="{ tab: 'four' }" queryParamsHandling="merge">Four</a>
         Four.
       </nz-tab>
     </nz-tabset>

diff --git a/components/tabs/doc/index.en-US.md b/components/tabs/doc/index.en-US.md
@@ -73,10 +73,19 @@ import { NzTabsModule } from 'ng-zorro-antd/tabs';
 
 Tab contents can be lazy loaded by declaring the body in a `ng-template` with the `[nz-tab]` attribute.
 
-### nz-tab-link
+### ng-template[nzTabLink] > a[nz-tab-link]
 
 Show a link in tab's head. Used in router link mode.
 
+```html
+<nz-tabset nzLinkRouter>
+  <nz-tab>
+    <a *nzTabLink nz-tab-link [routerLink]="['.']">Link</a>
+    Default.
+  </nz-tab>
+</nz-tabset>
+```
+
 ### Link Router
 
 This make the tabs component changes `nzSelectedIndex` with Angular route. You must use `nz-tab-link` instead of `[nzTitle]` in this situation.
diff --git a/components/tabs/doc/index.zh-CN.md b/components/tabs/doc/index.zh-CN.md
@@ -75,10 +75,19 @@ import { NzTabsModule } from 'ng-zorro-antd/tabs';
 
 与 `ng-template` 一同使用，用于标记需要懒加载的 `tab` 内容，具体用法见示例。
 
-### [nz-tab-link]
+### ng-template[nzTabLink] > a[nz-tab-link]
 
 选项卡头显示链接，在路由联动模式下使用。
 
+```html
+<nz-tabset nzLinkRouter>
+  <nz-tab>
+    <a *nzTabLink nz-tab-link [routerLink]="['.']">Link</a>
+    Default.
+  </nz-tab>
+</nz-tabset>
+```
+
 ### 路由联动
 
 路由联动可以让 tab 的切换和路由行为相一致。使用此功能时，title 必须通过 `nz-tab-link` 组件指定。
diff --git a/components/tabs/style/patch.less b/components/tabs/style/patch.less
@@ -1,15 +1,3 @@
-a[nz-tab-link] {
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: transparent;
-    content: '';
-  }
-}
-
 nz-tabset,
 nz-tab-nav-operation,
 nz-tabs-nav {

diff --git a/components/tabs/tab-link.directive.ts b/components/tabs/tab-link.directive.ts
@@ -3,9 +3,22 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { Directive, Optional, Self } from '@angular/core';
+import { Directive, Host, Optional, Self, TemplateRef } from '@angular/core';
 import { RouterLink, RouterLinkWithHref } from '@angular/router';
 
+import { warnDeprecation } from 'ng-zorro-antd/core/logger';
+
+/**
+ * Fix https://github.com/angular/angular/issues/8563
+ */
+@Directive({
+  selector: 'ng-template[nzTabLink]',
+  exportAs: 'nzTabLinkTemplate'
+})
+export class NzTabLinkTemplateDirective {
+  constructor(@Host() public templateRef: TemplateRef<void>) {}
+}
+
 /**
  * This component is for catching `routerLink` directive.
  */
@@ -14,5 +27,13 @@ import { RouterLink, RouterLinkWithHref } from '@angular/router';
   exportAs: 'nzTabLink'
 })
 export class NzTabLinkDirective {
-  constructor(@Optional() @Self() public routerLink?: RouterLink, @Optional() @Self() public routerLinkWithHref?: RouterLinkWithHref) {}
+  constructor(
+    @Optional() @Self() public routerLink?: RouterLink,
+    @Optional() @Self() public routerLinkWithHref?: RouterLinkWithHref,
+    @Optional() nzTabLinkTemplateDirective?: NzTabLinkTemplateDirective
+  ) {
+    if (!nzTabLinkTemplateDirective) {
+      warnDeprecation(`'a[nz-tab-link]' is deprecated. Please use 'ng-template[nzTabLink] > a[nz-tab-link]' instead.`);
+    }
+  }
 }
diff --git a/components/tabs/tab.component.ts b/components/tabs/tab.component.ts
@@ -26,7 +26,7 @@ import { Subject } from 'rxjs';
 import { BooleanInput, NzSafeAny } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 
-import { NzTabLinkDirective } from './tab-link.directive';
+import { NzTabLinkDirective, NzTabLinkTemplateDirective } from './tab-link.directive';
 import { NzTabDirective } from './tab.directive';
 
 /**
@@ -61,9 +61,14 @@ export class NzTabComponent implements OnChanges, OnDestroy, OnInit {
   @Output() readonly nzDeselect = new EventEmitter<void>();
   @Output() readonly nzClick = new EventEmitter<void>();
 
+  /**
+   * @deprecated Will be removed in 11.0.0
+   * @breaking-change 11.0.0
+   */
+  @ViewChild('tabLinkTemplate', { static: true }) tabLinkTemplate!: TemplateRef<void>;
+  @ContentChild(NzTabLinkTemplateDirective, { static: false }) nzTabLinkTemplateDirective!: NzTabLinkTemplateDirective;
   @ContentChild(NzTabDirective, { static: false, read: TemplateRef }) template: TemplateRef<void> | null = null;
   @ContentChild(NzTabLinkDirective, { static: false }) linkDirective!: NzTabLinkDirective;
-  @ViewChild('tabLinkTemplate', { static: true }) tabLinkTemplate!: TemplateRef<void>;
   @ViewChild('contentTemplate', { static: true }) contentTemplate!: TemplateRef<NzSafeAny>;
 
   isActive: boolean = false;
@@ -76,7 +81,7 @@ export class NzTabComponent implements OnChanges, OnDestroy, OnInit {
   }
 
   get label(): string | TemplateRef<void> {
-    return this.nzTitle || this.tabLinkTemplate;
+    return this.nzTitle || this.nzTabLinkTemplateDirective?.templateRef || this.tabLinkTemplate;
   }
 
   constructor(@Inject(NZ_TAB_SET) public closestTabSet: NzSafeAny) {}

diff --git a/components/tabs/tabs.module.ts b/components/tabs/tabs.module.ts
@@ -16,7 +16,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzTabAddButtonComponent } from './tab-add-button.component';
 import { NzTabBodyComponent } from './tab-body.component';
 import { NzTabCloseButtonComponent } from './tab-close-button.component';
-import { NzTabLinkDirective } from './tab-link.directive';
+import { NzTabLinkDirective, NzTabLinkTemplateDirective } from './tab-link.directive';
 import { NzTabNavBarComponent } from './tab-nav-bar.component';
 import { NzTabNavItemDirective } from './tab-nav-item.directive';
 import { NzTabNavOperationComponent } from './tab-nav-operation.component';
@@ -38,7 +38,8 @@ const DIRECTIVES = [
   NzTabCloseButtonComponent,
   NzTabDirective,
   NzTabBodyComponent,
-  NzTabLinkDirective
+  NzTabLinkDirective,
+  NzTabLinkTemplateDirective
 ];
 
 @NgModule({

diff --git a/components/tabs/tabset.component.ts b/components/tabs/tabset.component.ts
@@ -7,6 +7,7 @@ import { coerceNumberProperty } from '@angular/cdk/coercion';
 import {
   AfterContentChecked,
   AfterContentInit,
+  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -64,6 +65,7 @@ let nextId = 0;
   ],
   template: `
     <nz-tabs-nav
+      *ngIf="tabs.length"
       [ngStyle]="nzTabBarStyle"
       [selectedIndex]="nzSelectedIndex || 0"
       [inkBarAnimated]="inkBarAnimated"
@@ -143,7 +145,7 @@ let nextId = 0;
     '[class.ant-tabs-large]': `nzSize === 'large'`
   }
 })
-export class NzTabSetComponent implements OnInit, AfterContentChecked, OnDestroy, AfterContentInit, OnChanges {
+export class NzTabSetComponent implements OnInit, AfterContentChecked, OnDestroy, AfterContentInit, OnChanges, AfterViewInit {
   static ngAcceptInputType_nzHideAdd: BooleanInput;
   static ngAcceptInputType_nzHideAll: BooleanInput;
   static ngAcceptInputType_nzCentered: BooleanInput;
@@ -229,7 +231,7 @@ export class NzTabSetComponent implements OnInit, AfterContentChecked, OnDestroy
   // Pick up only direct descendants under ivy rendering engine
   // We filter out only the tabs that belong to this tab set in `tabs`.
   @ContentChildren(NzTabComponent, { descendants: true }) allTabs: QueryList<NzTabComponent> = new QueryList<NzTabComponent>();
-  @ViewChild(NzTabNavBarComponent, { static: true }) tabNavBarRef!: NzTabNavBarComponent;
+  @ViewChild(NzTabNavBarComponent, { static: false }) tabNavBarRef!: NzTabNavBarComponent;
 
   // All the direct tabs for this tab set
   tabs: QueryList<NzTabComponent> = new QueryList<NzTabComponent>();
@@ -267,7 +269,6 @@ export class NzTabSetComponent implements OnInit, AfterContentChecked, OnDestroy
   ngAfterContentInit(): void {
     this.subscribeToTabLabels();
     this.subscribeToAllTabChanges();
-    this.setUpRouter();
 
     // Subscribe to changes in the amount of tabs, in order to be
     // able to re-render the content as new tabs are added or removed.
@@ -289,6 +290,8 @@ export class NzTabSetComponent implements OnInit, AfterContentChecked, OnDestroy
           }
         }
       }
+      this.subscribeToTabLabels();
+      this.cdr.markForCheck();
     });
   }
 
@@ -466,4 +469,10 @@ export class NzTabSetComponent implements OnInit, AfterContentChecked, OnDestroy
       warnDeprecation(`[nzOnPrevClick] of nz-tabset is not support, will be removed in 11.0.0`);
     }
   }
+
+  ngAfterViewInit(): void {
+    Promise.resolve().then(() => {
+      this.setUpRouter();
+    });
+  }
 }