feat(module:tabs): support lazy load tabs (#2968)

close #2716

components/tabs/demo/lazy.md

@@ -0,0 +1,14 @@
+---
+order: 12
+title:
+  zh-CN: 懒加载
+  en-US: LazyLoad
+---
+
+## zh-CN
+
+默认情况下，`nz-tab` 中的组件会进行预加载，如果希望当 Tab 被激活时再加载组件，可以使用该示例中的懒加载方式。
+
+## en-US
+
+By default, the contents in `nz-tab` are eagerly loaded. Tab contents can be lazy loaded by declaring the body in a `ng-template` with the `[nz-tab]` attribute.

components/tabs/demo/lazy.ts

@@ -0,0 +1,47 @@
+/* entryComponents: NzDemoTabContentLazyComponent,NzDemoTabContentEagerlyComponent */
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-tabs-lazy',
+  template: `
+    <nz-tabset>
+      <nz-tab nzTitle="Tab Eagerly 1">
+        <nz-demo-tab-content-eagerly></nz-demo-tab-content-eagerly>
+      </nz-tab>
+      <nz-tab nzTitle="Tab Eagerly 2">
+        <nz-demo-tab-content-eagerly></nz-demo-tab-content-eagerly>
+      </nz-tab>
+      <nz-tab nzTitle="Tab Lazy 1">
+        <ng-template nz-tab>
+          <nz-demo-tab-content-lazy></nz-demo-tab-content-lazy>
+        </ng-template>
+      </nz-tab>
+      <nz-tab nzTitle="Tab Lazy 2">
+        <ng-template nz-tab>
+          <nz-demo-tab-content-lazy></nz-demo-tab-content-lazy>
+        </ng-template>
+      </nz-tab>
+    </nz-tabset>`
+})
+export class NzDemoTabsLazyComponent {
+}
+
+@Component({
+  selector: 'nz-demo-tab-content-lazy',
+  template: `lazy`
+})
+export class NzDemoTabContentLazyComponent implements OnInit {
+  ngOnInit(): void {
+    console.log(`I will init when tab active`);
+  }
+}
+
+@Component({
+  selector: 'nz-demo-tab-content-eagerly',
+  template: `eagerly`
+})
+export class NzDemoTabContentEagerlyComponent implements OnInit {
+  ngOnInit(): void {
+    console.log(`I will init eagerly`);
+  }
+}

components/tabs/doc/index.en-US.md

@@ -46,3 +46,7 @@ Ant Design has 3 types of Tabs for different situations.
 | `(nzClick)` | title click callback | `EventEmitter<void>` | - |
 | `(nzSelect)` | title select callback | `EventEmitter<void>` | - |
 | `(nzDeselect)` | title deselect callback | `EventEmitter<void>` | - |
+
+### [nz-tab]
+
+Tab contents can be lazy loaded by declaring the body in a `ng-template` with the `[nz-tab]` attribute.

components/tabs/doc/index.zh-CN.md

@@ -49,3 +49,8 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | `(nzClick)` | title被点击的回调函数 | `EventEmitter<void>` | - |
 | `(nzSelect)` | tab被选中的回调函数 | `EventEmitter<void>` | - |
 | `(nzDeselect)` | tab被取消选中的回调函数 | `EventEmitter<void>` | - |
+
+
+### [nz-tab]
+
+与 `ng-template` 一同使用，用于标记需要懒加载的 `tab` 内容，具体用法见示例。

components/tabs/nz-tab.component.ts

@@ -1,6 +1,6 @@
 import {
   ChangeDetectionStrategy,
-  Component, ElementRef,
+  Component, ContentChild, ElementRef,
   EventEmitter,
   Input,
   OnChanges, OnDestroy,
@@ -13,6 +13,7 @@ import {
 import { Subject } from 'rxjs';
 
 import { InputBoolean } from '../core/util/convert';
+import { NzTabDirective } from './nz-tab.directive';
 
 @Component({
   selector           : 'nz-tab',
@@ -27,6 +28,7 @@ export class NzTabComponent implements OnChanges, OnDestroy {
   isActive = false;
   readonly stateChanges = new Subject<void>();
   @ViewChild(TemplateRef) content: TemplateRef<void>;
+  @ContentChild(NzTabDirective, { read: TemplateRef }) template: TemplateRef<void>;
   @Input() nzTitle: string | TemplateRef<void>;
   @Input() @InputBoolean() nzForceRender = false;
   @Input() @InputBoolean() nzDisabled = false;

components/tabs/nz-tab.directive.ts

@@ -0,0 +1,10 @@
+import {
+  Directive
+} from '@angular/core';
+
+/** Decorates the `ng-template` tags and reads out the template from it. */
+@Directive({
+  selector: '[nz-tab]'
+})
+export class NzTabDirective {
+}

components/tabs/nz-tabs.module.ts

@@ -7,13 +7,14 @@ import { NzIconModule } from '../icon/nz-icon.module';
 import { NzTabBodyComponent } from './nz-tab-body.component';
 import { NzTabLabelDirective } from './nz-tab-label.directive';
 import { NzTabComponent } from './nz-tab.component';
+import { NzTabDirective } from './nz-tab.directive';
 import { NzTabsInkBarDirective } from './nz-tabs-ink-bar.directive';
 import { NzTabsNavComponent } from './nz-tabs-nav.component';
 import { NzTabSetComponent } from './nz-tabset.component';
 
 @NgModule({
-  declarations: [ NzTabComponent, NzTabSetComponent, NzTabsNavComponent, NzTabLabelDirective, NzTabsInkBarDirective, NzTabBodyComponent ],
-  exports     : [ NzTabComponent, NzTabSetComponent, NzTabsNavComponent, NzTabLabelDirective, NzTabsInkBarDirective, NzTabBodyComponent ],
+  declarations: [ NzTabComponent, NzTabDirective, NzTabSetComponent, NzTabsNavComponent, NzTabLabelDirective, NzTabsInkBarDirective, NzTabBodyComponent ],
+  exports     : [ NzTabComponent, NzTabDirective, NzTabSetComponent, NzTabsNavComponent, NzTabLabelDirective, NzTabsInkBarDirective, NzTabBodyComponent ],
   imports     : [ CommonModule, ObserversModule, NzIconModule, NzAddOnModule ]
 })
 export class NzTabsModule {

components/tabs/nz-tabset.component.html

@@ -45,7 +45,7 @@
       *ngFor="let tab of listOfNzTabComponent; let i = index"
       [active]="(nzSelectedIndex == i) && !nzHideAll"
       [forceRender]="tab.nzForceRender"
-      [content]="tab.content">
+      [content]="tab.template || tab.content">
     </div>
   </div>
 </ng-container>

scripts/site/_site/doc/style/toc.less

@@ -46,6 +46,7 @@ ul.toc > li {
 
 .toc-affix {
   position: absolute;
+  max-width: 120px;
   top: 8px;
   right: 20px;
   .ant-affix {

scripts/site/utils/generate-demo.js

@@ -201,7 +201,7 @@ function generateExample(result) {
 }
 
 function retrieveEntryComponents(plainCode) {
-  var matches = (plainCode + '').match(/^\/\*\s*?entryComponents:\s*([^\n]+?)\*\//) || [];
+  const matches = (plainCode + '').match(/^\/\*\s*?entryComponents:\s*([^\n]+?)\*\//) || [];
   if (matches[1]) {
     return matches[1].split(',').map(className => className.trim()).filter((value, index, self) => value && self.indexOf(value) === index);
   }