feat(module:drawer): add nzDrawerContent directive (#6085)

DEPRECATED: Usage `<ng-content></ng-content>` is deprecated, which will be removed in 12.0.0. Please instead use `<ng-template nzDrawerContent></ng-template>` to declare the content of the drawer.
NG-ZORRO · Nov 30, 2020 · 6fc0683 · 6fc0683
1 parent d54fe42
commit 6fc0683
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 55 deletions.
diff --git a/components/drawer/demo/basic-right.ts b/components/drawer/demo/basic-right.ts
@@ -5,9 +5,11 @@ import { Component } from '@angular/core';
   template: `
     <button nz-button nzType="primary" (click)="open()">Open</button>
     <nz-drawer [nzClosable]="false" [nzVisible]="visible" nzPlacement="right" nzTitle="Basic Drawer" (nzOnClose)="close()">
-      <p>Some contents...</p>
-      <p>Some contents...</p>
-      <p>Some contents...</p>
+      <ng-container *nzDrawerContent>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </ng-container>
     </nz-drawer>
   `
 })

diff --git a/components/drawer/demo/from-drawer.ts b/components/drawer/demo/from-drawer.ts
@@ -13,7 +13,7 @@ import { Component } from '@angular/core';
       [nzFooter]="footerTpl"
       (nzOnClose)="close()"
     >
-      <form nz-form>
+      <form nz-form *nzDrawerContent>
         <div nz-row [nzGutter]="8">
           <div nz-col nzSpan="12">
             <nz-form-item>
@@ -80,14 +80,14 @@ import { Component } from '@angular/core';
             </nz-form-item>
           </div>
         </div>
-
-        <ng-template #footerTpl>
-          <div style="float: right">
-            <button nz-button style="margin-right: 8px;" (click)="close()">Cancel</button>
-            <button nz-button nzType="primary" (click)="close()">Submit</button>
-          </div>
-        </ng-template>
       </form>
+
+      <ng-template #footerTpl>
+        <div style="float: right">
+          <button nz-button style="margin-right: 8px;" (click)="close()">Cancel</button>
+          <button nz-button nzType="primary" (click)="close()">Submit</button>
+        </div>
+      </ng-template>
     </nz-drawer>
   `
 })

diff --git a/components/drawer/demo/multi-level-drawer.ts b/components/drawer/demo/multi-level-drawer.ts
@@ -12,7 +12,7 @@ import { Component } from '@angular/core';
       nzTitle="Cookbook"
       (nzOnClose)="close()"
     >
-      <form nz-form>
+      <form *nzDrawerContent nz-form>
         <div nz-row>
           <div nz-col nzSpan="24">
             <nz-form-item>
@@ -37,7 +37,7 @@ import { Component } from '@angular/core';
         </div>
       </form>
       <nz-drawer [nzClosable]="false" [nzVisible]="childrenVisible" nzTitle="Food" (nzOnClose)="closeChildren()">
-        <nz-list [nzDataSource]="vegetables" [nzRenderItem]="item">
+        <nz-list *nzDrawerContent [nzDataSource]="vegetables" [nzRenderItem]="item">
           <ng-template #item let-item>
             <nz-list-item [nzContent]="item"></nz-list-item>
           </ng-template>

diff --git a/components/drawer/demo/placement.ts b/components/drawer/demo/placement.ts
@@ -12,9 +12,11 @@ import { NzDrawerPlacement } from 'ng-zorro-antd/drawer';
     </nz-radio-group>
     <button nz-button nzType="primary" (click)="open()">Open</button>
     <nz-drawer [nzClosable]="false" [nzVisible]="visible" [nzPlacement]="placement" nzTitle="Basic Drawer" (nzOnClose)="close()">
-      <p>Some contents...</p>
-      <p>Some contents...</p>
-      <p>Some contents...</p>
+      <ng-container *nzDrawerContent>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </ng-container>
     </nz-drawer>
   `
 })

diff --git a/components/drawer/demo/user-profile.ts b/components/drawer/demo/user-profile.ts
@@ -22,37 +22,37 @@ import { Component } from '@angular/core';
       </ng-template>
     </nz-list>
     <nz-drawer [nzVisible]="visible" [nzWidth]="640" [nzClosable]="false" (nzOnClose)="close()">
-      <p class="title" style=" margin-bottom: 24px;">User Profile</p>
-      <nz-descriptions [nzColumn]="2" nzTitle="Personal">
-        <nz-descriptions-item nzTitle="Full Name" [nzSpan]="1">Lily</nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Account" [nzSpan]="1">AntDesign@example.com</nz-descriptions-item>
-        <nz-descriptions-item nzTitle="City" [nzSpan]="1">HangZhou</nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Country" [nzSpan]="1">China🇨🇳</nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Birthday" [nzSpan]="1">February 2,1900</nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Website" [nzSpan]="1"> - </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Message" [nzSpan]="2">
-          Make things as simple as possible but no simpler.
-        </nz-descriptions-item>
-      </nz-descriptions>
-      <nz-divider></nz-divider>
-      <nz-descriptions [nzColumn]="2" nzTitle="Company">
-        <nz-descriptions-item nzTitle="Position" [nzSpan]="1">Programmer</nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Responsibilities" [nzSpan]="1">Coding</nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Department" [nzSpan]="1">AFX</nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Supervisor" [nzSpan]="1">Lin</nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Skills" [nzSpan]="2">
-          C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer
-          architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc.
-        </nz-descriptions-item>
-      </nz-descriptions>
-      <nz-divider></nz-divider>
-      <nz-descriptions [nzColumn]="2" nzTitle="Contacts">
-        <nz-descriptions-item nzTitle="Email" [nzSpan]="1">AntDesign@example.com</nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Phone Number" [nzSpan]="1">+86 181 0000 0000</nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Github" [nzSpan]="2">
-          <a href="https://github.com/NG-ZORRO/ng-zorro-antd" target="_blank">github.com/NG-ZORRO/ng-zorro-antd</a>
-        </nz-descriptions-item>
-      </nz-descriptions>
+      <ng-container *nzDrawerContent>
+        <p class="title" style=" margin-bottom: 24px;">User Profile</p>
+        <nz-descriptions [nzColumn]="2" nzTitle="Personal">
+          <nz-descriptions-item nzTitle="Full Name" [nzSpan]="1">Lily</nz-descriptions-item>
+          <nz-descriptions-item nzTitle="Account" [nzSpan]="1">AntDesign@example.com</nz-descriptions-item>
+          <nz-descriptions-item nzTitle="City" [nzSpan]="1">HangZhou</nz-descriptions-item>
+          <nz-descriptions-item nzTitle="Country" [nzSpan]="1">China🇨🇳</nz-descriptions-item>
+          <nz-descriptions-item nzTitle="Birthday" [nzSpan]="1">February 2,1900</nz-descriptions-item>
+          <nz-descriptions-item nzTitle="Website" [nzSpan]="1">-</nz-descriptions-item>
+          <nz-descriptions-item nzTitle="Message" [nzSpan]="2">Make things as simple as possible but no simpler.</nz-descriptions-item>
+        </nz-descriptions>
+        <nz-divider></nz-divider>
+        <nz-descriptions [nzColumn]="2" nzTitle="Company">
+          <nz-descriptions-item nzTitle="Position" [nzSpan]="1">Programmer</nz-descriptions-item>
+          <nz-descriptions-item nzTitle="Responsibilities" [nzSpan]="1">Coding</nz-descriptions-item>
+          <nz-descriptions-item nzTitle="Department" [nzSpan]="1">AFX</nz-descriptions-item>
+          <nz-descriptions-item nzTitle="Supervisor" [nzSpan]="1">Lin</nz-descriptions-item>
+          <nz-descriptions-item nzTitle="Skills" [nzSpan]="2">
+            C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer
+            architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc.
+          </nz-descriptions-item>
+        </nz-descriptions>
+        <nz-divider></nz-divider>
+        <nz-descriptions [nzColumn]="2" nzTitle="Contacts">
+          <nz-descriptions-item nzTitle="Email" [nzSpan]="1">AntDesign@example.com</nz-descriptions-item>
+          <nz-descriptions-item nzTitle="Phone Number" [nzSpan]="1">+86 181 0000 0000</nz-descriptions-item>
+          <nz-descriptions-item nzTitle="Github" [nzSpan]="2">
+            <a href="https://github.com/NG-ZORRO/ng-zorro-antd" target="_blank">github.com/NG-ZORRO/ng-zorro-antd</a>
+          </nz-descriptions-item>
+        </nz-descriptions>
+      </ng-container>
     </nz-drawer>
   `,
   styles: [

diff --git a/components/drawer/drawer-content.directive.ts b/components/drawer/drawer-content.directive.ts
@@ -0,0 +1,15 @@
+/**
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { Directive, TemplateRef } from '@angular/core';
+import { NzSafeAny } from 'ng-zorro-antd/core/types';
+
+@Directive({
+  selector: '[nzDrawerContent]',
+  exportAs: 'nzDrawerContent'
+})
+export class NzDrawerContentDirective {
+  constructor(public templateRef: TemplateRef<NzSafeAny>) {}
+}
diff --git a/components/drawer/drawer.component.ts b/components/drawer/drawer.component.ts
@@ -9,10 +9,12 @@ import { Overlay, OverlayConfig, OverlayKeyboardDispatcher, OverlayRef } from '@
 import { CdkPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import { DOCUMENT } from '@angular/common';
 import {
+  AfterContentInit,
   AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  ContentChild,
   EventEmitter,
   Inject,
   Injector,
@@ -29,12 +31,16 @@ import {
   ViewChild,
   ViewContainerRef
 } from '@angular/core';
+
+import { Observable, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
+import { warnDeprecation } from 'ng-zorro-antd/core/logger';
 import { BooleanInput, NgStyleInterface, NzSafeAny } from 'ng-zorro-antd/core/types';
 import { InputBoolean, toCssPixel } from 'ng-zorro-antd/core/util';
 
-import { Observable, Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { NzDrawerContentDirective } from './drawer-content.directive';
 import { NzDrawerOptionsOfComponent, NzDrawerPlacement } from './drawer-options';
 import { NzDrawerRef } from './drawer-ref';
 
@@ -82,10 +88,17 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'drawer';
               </div>
               <div class="ant-drawer-body" [ngStyle]="nzBodyStyle">
                 <ng-template cdkPortalOutlet></ng-template>
-                <ng-container *ngIf="isTemplateRef(nzContent)">
-                  <ng-container *ngTemplateOutlet="$any(nzContent); context: templateContext"></ng-container>
+                <ng-container *ngIf="nzContent; else contentElseTemp">
+                  <ng-container *ngIf="isTemplateRef(nzContent)">
+                    <ng-container *ngTemplateOutlet="$any(nzContent); context: templateContext"></ng-container>
+                  </ng-container>
                 </ng-container>
-                <ng-content *ngIf="!nzContent"></ng-content>
+                <ng-template #contentElseTemp>
+                  <ng-container *ngIf="contentFromContentChild">
+                    <ng-template [ngTemplateOutlet]="contentFromContentChild"></ng-template>
+                  </ng-container>
+                </ng-template>
+                <ng-content *ngIf="!(nzContent || contentFromContentChild)"></ng-content>
               </div>
               <div *ngIf="nzFooter" class="ant-drawer-footer">
                 <ng-container *nzStringTemplateOutlet="nzFooter"><div [innerHTML]="nzFooter"></div></ng-container>
@@ -101,7 +114,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'drawer';
 })
 export class NzDrawerComponent<T = NzSafeAny, R = NzSafeAny, D = NzSafeAny>
   extends NzDrawerRef<T, R>
-  implements OnInit, OnDestroy, AfterViewInit, OnChanges, NzDrawerOptionsOfComponent {
+  implements OnInit, OnDestroy, AfterViewInit, OnChanges, AfterContentInit, NzDrawerOptionsOfComponent {
   readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;
   static ngAcceptInputType_nzClosable: BooleanInput;
   static ngAcceptInputType_nzMaskClosable: BooleanInput;
@@ -146,6 +159,7 @@ export class NzDrawerComponent<T = NzSafeAny, R = NzSafeAny, D = NzSafeAny>
 
   @ViewChild('drawerTemplate', { static: true }) drawerTemplate!: TemplateRef<void>;
   @ViewChild(CdkPortalOutlet, { static: false }) bodyPortalOutlet?: CdkPortalOutlet;
+  @ContentChild(NzDrawerContentDirective, { static: true, read: TemplateRef }) contentFromContentChild?: TemplateRef<NzSafeAny>;
 
   private destroy$ = new Subject<void>();
   previouslyFocusedElement?: HTMLElement;
@@ -250,6 +264,14 @@ export class NzDrawerComponent<T = NzSafeAny, R = NzSafeAny, D = NzSafeAny>
     });
   }
 
+  ngAfterContentInit(): void {
+    if (!(this.contentFromContentChild || this.nzContent)) {
+      warnDeprecation(
+        'Usage `<ng-content></ng-content>` is deprecated, which will be removed in 12.0.0. Please instead use `<ng-template nzDrawerContent></ng-template>` to declare the content of the drawer.'
+      );
+    }
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     const { nzPlacement, nzVisible } = changes;
     if (nzVisible) {

diff --git a/components/drawer/drawer.module.ts b/components/drawer/drawer.module.ts
@@ -12,13 +12,14 @@ import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
 
 import { NzIconModule } from 'ng-zorro-antd/icon';
 
+import { NzDrawerContentDirective } from './drawer-content.directive';
 import { NzDrawerComponent } from './drawer.component';
 import { NzDrawerServiceModule } from './drawer.service.module';
 
 @NgModule({
   imports: [CommonModule, OverlayModule, PortalModule, NzIconModule, NzOutletModule, NzNoAnimationModule, NzDrawerServiceModule],
-  exports: [NzDrawerComponent],
-  declarations: [NzDrawerComponent],
+  exports: [NzDrawerComponent, NzDrawerContentDirective],
+  declarations: [NzDrawerComponent, NzDrawerContentDirective],
   entryComponents: [NzDrawerComponent]
 })
 export class NzDrawerModule {}
diff --git a/components/drawer/public-api.ts b/components/drawer/public-api.ts
@@ -4,6 +4,7 @@
  */
 
 export * from './drawer.component';
+export * from './drawer-content.directive';
 export * from './drawer.module';
 export * from './drawer.service';
 export * from './drawer.service.module';