feat(module:modal): add nzModalContent directive

close #6065 DEPRECATED: Usage `<ng-content></ng-content>` is deprecated, use `<ng-template nzModalContent></ng-template>` to declare the contents of the modal.
NG-ZORRO · Nov 30, 2020 · a78812c · a78812c
1 parent 3204927
commit a78812c
Show file tree

Hide file tree

Showing 16 changed files with 73 additions and 46 deletions.
diff --git a/components/modal/demo/async.ts b/components/modal/demo/async.ts
@@ -13,7 +13,7 @@ import { Component } from '@angular/core';
       (nzOnOk)="handleOk()"
       [nzOkLoading]="isOkLoading"
     >
-      <p>Modal Content</p>
+      <p *nzModalContent>Modal Content</p>
     </nz-modal>
   `
 })

diff --git a/components/modal/demo/basic.ts b/components/modal/demo/basic.ts
@@ -5,10 +5,11 @@ import { Component } from '@angular/core';
   template: `
     <button nz-button [nzType]="'primary'" (click)="showModal()"><span>Show Modal</span></button>
     <nz-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
-      <p>Content one</p>
-      <p>Content two</p>
-      <p>Content three</p>
-      <p>Content three</p>
+      <ng-container *nzModalContent>
+        <p>Content one</p>
+        <p>Content two</p>
+        <p>Content three</p>
+      </ng-container>
     </nz-modal>
   `
 })

diff --git a/components/modal/demo/footer.md b/components/modal/demo/footer.md
@@ -1,8 +1,8 @@
 ---
 order: 2
 title:
-  zh-CN: 自定义页脚
-  en-US: Customized Footer
+  zh-CN: 自定义组成部分
+  en-US: Customized Parts
 ---
 
 ## zh-CN

diff --git a/components/modal/demo/footer.ts b/components/modal/demo/footer.ts
@@ -13,9 +13,7 @@ import { Component } from '@angular/core';
       [nzFooter]="modalFooter"
       (nzOnCancel)="handleCancel()"
     >
-      <ng-template #modalTitle>
-        Custom Modal Title
-      </ng-template>
+      <ng-template #modalTitle>Custom Modal Title</ng-template>
 
       <ng-template #modalContent>
         <p>Modal Content</p>
@@ -26,7 +24,7 @@ import { Component } from '@angular/core';
       </ng-template>
 
       <ng-template #modalFooter>
-        <span>Modal Footer: </span>
+        <span>Modal Footer:</span>
         <button nz-button nzType="default" (click)="handleCancel()">Custom Callback</button>
         <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Custom Submit</button>
       </ng-template>
@@ -48,7 +46,7 @@ export class NzDemoModalFooterComponent {
     setTimeout(() => {
       this.isVisible = false;
       this.isConfirmLoading = false;
-    }, 3000);
+    }, 1000);
   }
 
   handleCancel(): void {

diff --git a/components/modal/demo/footer2.md b/components/modal/demo/footer2.md
@@ -1,8 +1,8 @@
 ---
 order: 3
 title:
-  zh-CN: 自定义页脚(2)
-  en-US: Customized Footer(2)
+  zh-CN: 自定义页脚
+  en-US: Customized Footer
 ---
 
 ## zh-CN

diff --git a/components/modal/demo/footer2.ts b/components/modal/demo/footer2.ts
@@ -15,15 +15,15 @@ import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
       <span>In Component</span>
     </button>
     <nz-modal [(nzVisible)]="isVisible" nzTitle="Custom Modal Title" (nzOnCancel)="handleCancel()">
-      <div>
+      <div *nzModalContent>
         <p>Modal Content</p>
         <p>Modal Content</p>
         <p>Modal Content</p>
         <p>Modal Content</p>
         <p>Modal Content</p>
       </div>
       <div *nzModalFooter>
-        <span>Modal Footer: </span>
+        <span>Modal Footer:</span>
         <button nz-button nzType="default" (click)="handleCancel()">Custom Callback</button>
         <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Custom Submit</button>
       </div>

diff --git a/components/modal/demo/locale.ts b/components/modal/demo/locale.ts
@@ -14,9 +14,11 @@ import { NzModalService } from 'ng-zorro-antd/modal';
         (nzOnOk)="handleOk()"
         (nzOnCancel)="handleCancel()"
       >
-        <p>Bla bla ...</p>
-        <p>Bla bla ...</p>
-        <p>Bla bla ...</p>
+        <ng-container *nzModalContent>
+          <p>Bla bla ...</p>
+          <p>Bla bla ...</p>
+          <p>Bla bla ...</p>
+        </ng-container>
       </nz-modal>
     </div>
     <br />

diff --git a/components/modal/demo/position.ts b/components/modal/demo/position.ts
@@ -11,12 +11,15 @@ import { Component } from '@angular/core';
       (nzOnCancel)="handleCancelTop()"
       (nzOnOk)="handleOkTop()"
     >
-      <p>some contents...</p>
-      <p>some contents...</p>
-      <p>some contents...</p>
+      <ng-container *nzModalContent>
+        <p>some contents...</p>
+        <p>some contents...</p>
+        <p>some contents...</p>
+      </ng-container>
     </nz-modal>
 
-    <br /><br />
+    <br />
+    <br />
 
     <button nz-button nzType="primary" (click)="showModalMiddle()">Vertically centered modal dialog</button>
     <nz-modal
@@ -26,9 +29,11 @@ import { Component } from '@angular/core';
       (nzOnCancel)="handleCancelMiddle()"
       (nzOnOk)="handleOkMiddle()"
     >
-      <p>some contents...</p>
-      <p>some contents...</p>
-      <p>some contents...</p>
+      <ng-container *nzModalContent>
+        <p>some contents...</p>
+        <p>some contents...</p>
+        <p>some contents...</p>
+      </ng-container>
     </nz-modal>
   `,
   styles: [

diff --git a/components/modal/demo/service.ts b/components/modal/demo/service.ts
@@ -39,9 +39,6 @@ import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
     <br />
 
     <button nz-button nzType="primary" (click)="openAndCloseAll()">Open more modals then close all after 2s</button>
-    <nz-modal [(nzVisible)]="htmlModalVisible" nzMask="false" [nzZIndex]="1001" nzTitle="Non-service html modal">
-      This is a non-service html modal
-    </nz-modal>
   `,
   styles: [
     `
@@ -53,7 +50,6 @@ import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
 })
 export class NzDemoModalServiceComponent {
   tplModalButtonLoading = false;
-  htmlModalVisible = false;
   disabled = false;
 
   constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef) {}
@@ -170,8 +166,6 @@ export class NzDemoModalServiceComponent {
       })
     );
 
-    this.htmlModalVisible = true;
-
     this.modal.afterAllClose.subscribe(() => console.log('afterAllClose emitted!'));
 
     setTimeout(() => this.modal.closeAll(), 2000);

diff --git a/components/modal/doc/index.en-US.md b/components/modal/doc/index.en-US.md
@@ -157,7 +157,7 @@ The above configuration items can also be changed in real-time to trigger the bu
 
 ### [nzModalFooter]
 
-Another way to customize the footer button.
+Customize the footer.
 
 ```html
 <div *nzModalFooter>

diff --git a/components/modal/doc/index.zh-CN.md b/components/modal/doc/index.zh-CN.md
@@ -157,7 +157,7 @@ nzFooter: [{
 
 ### [nzModalFooter]
 
-另一种自定义页脚按钮的方式。
+自定义页脚。
 
 ```html
 <div *nzModalFooter>

diff --git a/components/modal/modal-content.directive.ts b/components/modal/modal-content.directive.ts
@@ -0,0 +1,14 @@
+/**
+ * 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';
+
+@Directive({
+  selector: '[nzModalContent]',
+  exportAs: 'nzModalContent'
+})
+export class NzModalContentDirective {
+  constructor(public templateRef: TemplateRef<{}>) {}
+}
diff --git a/components/modal/modal-footer.directive.spec.ts b/components/modal/modal-footer.directive.spec.ts
@@ -3,6 +3,7 @@ import { Component, TemplateRef, ViewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, flush, inject, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 import { NzModalFooterDirective } from './modal-footer.directive';
 import { NzModalRef } from './modal-ref';
@@ -48,7 +49,7 @@ describe('modal footer directive', () => {
     fixture.detectChanges();
     expect(testComponent.isVisible).toBe(true);
     const modalRef = testComponent.nzModalComponent.getModalRef();
-    expect(modalRef!.getConfig().nzFooter).toBe(testComponent.nzModalFooterDirective.templateRef);
+    expect(modalRef!.getConfig().nzFooter).toEqual(testComponent.nzModalFooterDirective);
 
     testComponent.handleCancel();
     fixture.detectChanges();
@@ -63,7 +64,7 @@ describe('modal footer directive', () => {
     initOpenedComponentFixture.detectChanges();
     const modalRef = initOpenedComponent.nzModalComponent.getModalRef();
 
-    expect(modalRef!.getConfig().nzFooter).toBe(initOpenedComponent.nzModalFooterDirective.templateRef);
+    expect(modalRef!.getConfig().nzFooter).toEqual(initOpenedComponent.nzModalFooterDirective);
 
     initOpenedComponentFixture.detectChanges();
   }));
@@ -73,7 +74,7 @@ describe('modal footer directive', () => {
     fixture.detectChanges();
 
     expect(modalRef.componentInstance!.nzModalRef).toBe(modalRef);
-    expect(modalRef.componentInstance!.nzModalFooterDirective.templateRef).toBe(modalRef.getConfig().nzFooter as TemplateRef<{}>);
+    expect(modalRef.componentInstance!.nzModalFooterDirective).toEqual(modalRef.getConfig().nzFooter as TemplateRef<{}>);
   });
 });
 
@@ -92,7 +93,7 @@ describe('modal footer directive', () => {
 class TestDirectiveFooterComponent {
   isVisible = false;
   @ViewChild(NzModalComponent) nzModalComponent!: NzModalComponent;
-  @ViewChild(NzModalFooterDirective) nzModalFooterDirective!: NzModalFooterDirective;
+  @ViewChild(NzModalFooterDirective, { static: true, read: TemplateRef }) nzModalFooterDirective!: TemplateRef<NzSafeAny>;
 
   constructor() {}
 
@@ -120,7 +121,7 @@ class TestDirectiveFooterComponent {
 class TestDirectiveFooterWithInitOpenedComponent {
   isVisible = true;
   @ViewChild(NzModalComponent) nzModalComponent!: NzModalComponent;
-  @ViewChild(NzModalFooterDirective) nzModalFooterDirective!: NzModalFooterDirective;
+  @ViewChild(NzModalFooterDirective, { static: true, read: TemplateRef }) nzModalFooterDirective!: TemplateRef<NzSafeAny>;
 
   constructor() {}
 }
@@ -134,7 +135,7 @@ class TestDirectiveFooterWithInitOpenedComponent {
   `
 })
 class TestDirectiveFooterInServiceComponent {
-  @ViewChild(NzModalFooterDirective) nzModalFooterDirective!: NzModalFooterDirective;
+  @ViewChild(NzModalFooterDirective, { static: true, read: TemplateRef }) nzModalFooterDirective!: TemplateRef<NzSafeAny>;
 
   constructor(public nzModalRef: NzModalRef) {}
 

diff --git a/components/modal/modal.component.ts b/components/modal/modal.component.ts
@@ -22,10 +22,12 @@ import {
 } from '@angular/core';
 
 import { NzButtonType } from 'ng-zorro-antd/button';
+import { warnDeprecation } from 'ng-zorro-antd/core/logger';
 import { BooleanInput, NzSafeAny } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 import { Observable } from 'rxjs';
 
+import { NzModalContentDirective } from './modal-content.directive';
 import { NzModalFooterDirective } from './modal-footer.directive';
 import { NzModalLegacyAPI } from './modal-legacy-api';
 import { NzModalRef } from './modal-ref';
@@ -104,12 +106,14 @@ export class NzModalComponent<T = NzSafeAny, R = NzSafeAny> implements OnChanges
   @Output() readonly nzVisibleChange = new EventEmitter<boolean>();
 
   @ViewChild(TemplateRef, { static: true }) contentTemplateRef!: TemplateRef<{}>;
-  @ContentChild(NzModalFooterDirective)
-  set modalFooter(value: NzModalFooterDirective) {
-    if (value && value.templateRef) {
-      this.setFooterWithTemplate(value.templateRef);
+  @ContentChild(NzModalContentDirective, { static: true, read: TemplateRef }) contentFromContentChild!: TemplateRef<NzSafeAny>;
+  @ContentChild(NzModalFooterDirective, { static: true, read: TemplateRef })
+  set modalFooter(value: TemplateRef<NzSafeAny>) {
+    if (value) {
+      this.setFooterWithTemplate(value);
     }
   }
+
   private modalRef: NzModalRef | null = null;
 
   get afterOpen(): Observable<void> {
@@ -189,8 +193,13 @@ export class NzModalComponent<T = NzSafeAny, R = NzSafeAny> implements OnChanges
   private getConfig(): ModalOptions {
     const componentConfig = getConfigFromComponent(this);
     componentConfig.nzViewContainerRef = this.viewContainerRef;
-    if (!this.nzContent) {
+    if (!this.nzContent && !this.contentFromContentChild) {
       componentConfig.nzContent = this.contentTemplateRef;
+      warnDeprecation(
+        'Usage `<ng-content></ng-content>` is deprecated, which will be removed in 12.0.0. Please instead use `<ng-template nzModalContent></ng-template>` to declare the content of the modal.'
+      );
+    } else {
+      componentConfig.nzContent = this.nzContent || this.contentFromContentChild;
     }
     return componentConfig;
   }

diff --git a/components/modal/modal.module.ts b/components/modal/modal.module.ts
@@ -18,6 +18,7 @@ import { NzPipesModule } from 'ng-zorro-antd/pipes';
 import { NzModalCloseComponent } from './modal-close.component';
 import { NzModalConfirmContainerComponent } from './modal-confirm-container.component';
 import { NzModalContainerComponent } from './modal-container.component';
+import { NzModalContentDirective } from './modal-content.directive';
 import { NzModalFooterComponent } from './modal-footer.component';
 import { NzModalFooterDirective } from './modal-footer.directive';
 import { NzModalTitleComponent } from './modal-title.component';
@@ -37,12 +38,13 @@ import { NzModalService } from './modal.service';
     NzNoAnimationModule,
     NzPipesModule
   ],
-  exports: [NzModalComponent, NzModalFooterDirective],
+  exports: [NzModalComponent, NzModalFooterDirective, NzModalContentDirective],
   providers: [NzModalService],
   entryComponents: [NzModalContainerComponent, NzModalConfirmContainerComponent],
   declarations: [
     NzModalComponent,
     NzModalFooterDirective,
+    NzModalContentDirective,
     NzModalCloseComponent,
     NzModalFooterComponent,
     NzModalTitleComponent,

diff --git a/components/modal/public-api.ts b/components/modal/public-api.ts
@@ -9,6 +9,7 @@ export * from './modal-ref';
 export * from './modal-config';
 export * from './modal.component';
 export * from './modal-footer.directive';
+export * from './modal-content.directive';
 export * from './modal.module';
 export * from './modal-confirm-container.component';
 export * from './modal-container.component';