feat(module:modal): Remove nzComponentParams in v16 (#7930)

Author: MunMunMiao

components/modal/demo/service.md

@@ -9,10 +9,10 @@ title:
 
 Modal的service用法，示例中演示了用户自定义模板、自定义component、以及注入模态框实例的方法。
 
-使用模版作为内容或页脚时的上下文为 ` { $implicit: nzData || nzComponentParams, modalRef: NzModalRef }`
+使用模版作为内容或页脚时的上下文为 ` { $implicit: nzData, modalRef: NzModalRef }`
 
 ## en-US
 
 Usage of Modal's service, examples demonstrate user-defined templates, custom components, and methods for injecting modal instances.
 
-The template context is ` { $implicit: nzData || nzComponentParams, modalRef: NzModalRef }` when the content or footer is templates.
+The template context is ` { $implicit: nzData, modalRef: NzModalRef }` when the content or footer is templates.

components/modal/demo/service.ts

@@ -78,9 +78,6 @@ export class NzDemoModalServiceComponent {
       nzFooter: tplFooter,
       nzMaskClosable: false,
       nzClosable: false,
-      nzComponentParams: {
-        value: 'Template Context'
-      },
       nzOnOk: () => console.log('Click ok')
     });
   }
@@ -98,10 +95,6 @@ export class NzDemoModalServiceComponent {
       nzTitle: 'Modal Title',
       nzContent: NzModalCustomComponent,
       nzViewContainerRef: this.viewContainerRef,
-      nzComponentParams: {
-        title: 'title in component',
-        subtitle: 'component sub title，will be changed after 2 sec'
-      },
       nzData: {
         favoriteLibrary: 'angular',
         favoriteFramework: 'angular'

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

@@ -56,7 +56,6 @@ The dialog is currently divided into 2 modes, `normal mode` and `confirm box mod
 | `nzOnCancel`        | Specify a function that will be called when a user clicks mask, close button on top right or Cancel button (If nzContent is Component, the Component instance will be put in as an argument). <i>Note: When created with `NzModalService.create`, this parameter should be passed into the type of function (callback function). This function returns a promise, which is automatically closed when the execution is complete or the promise ends (return `false` to prevent closing)</i> | EventEmitter | - |
 | `nzOnOk`            | Specify a EventEmitter that will be emitted when a user clicks the OK button (If nzContent is Component, the Component instance will be put in as an argument). <i>Note: When created with `NzModalService.create`, this parameter should be passed into the type of function (callback function). This function returns a promise, which is automatically closed when the execution is complete or the promise ends (return `false` to prevent closing)</i> | EventEmitter | - |
 | `nzContent`         | Content | string / TemplateRef / Component / ng-content | - |
-| `nzComponentParams` | Deprecated, will be removed to the next major version, prefer using nzData. Will be instance property when `nzContent` is a component，will be template variable when `nzContent` is `TemplateRef`  | `object` | - |
 | `nzData`            | Will be a template variable when `nzContent` is `TemplateRef`  | `object`, will be the value of the injection token NZ_MODAL_DATA when `nzContent` is a component| - |
 | `nzIconType`        | Icon type of the Icon component. <i>Only valid in confirm box mode</i> | `string` | question-circle |
 | `nzAutofocus`        | autofocus and the position，disabled when is `null` | `'ok' \| 'cancel' \| 'auto' \| null` | `'auto'` |
@@ -66,10 +65,6 @@ The dialog is currently divided into 2 modes, `normal mode` and `confirm box mod
 > NZ_MODAL_DATA injection token is used to retrieve `nzData` in the custom component.
 The dialog created by the service method `NzModalService.create()` inject a `NZ_MODAL_DATA` token (if `nzContent` is used as Component) to retrieve the parameters that have used to the '`nzContent` component'
 
-#### Attentions
-
-> The creation or modification of the `nzComponentParams` property does not trigger the `ngOnChanges` life cycle hook of the `nzContent` component.
-
 #### Using service to create Normal Mode modal
 
 > You can call `NzModalService.create(options)` to dynamically create **normal mode** modals, where `options` is an object that supports the support given in the API above **normal mode** parameters

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

@@ -61,15 +61,10 @@ import { NzModalModule } from 'ng-zorro-antd/modal';
 | nzOnCancel        | 点击遮罩层或右上角叉或取消按钮的回调（若nzContent为Component，则将会以该Component实例作为参数）。<i>注：当以`NzModalService.create`创建时，此参数应传入function（回调函数）。该函数可返回promise，待执行完毕或promise结束时，将自动关闭对话框（返回false可阻止关闭）</i> | EventEmitter | - |
 | nzOnOk            | 点击确定回调（若nzContent为Component，则将会以该Component实例作为参数）。<i>注：当以`NzModalService.create`创建时，此参数应传入function（回调函数）。该函数可返回promise，待执行完毕或promise结束时，将自动关闭对话框（返回false可阻止关闭）</i> | EventEmitter | - |
 | nzContent         | 内容 | string<br>TemplateRef<br>Component<br>ng-content | - |
-| nzComponentParams | 当 `nzContent` 为组件时将作为实例属性，为 `TemplateRef` 时将作为模版变量 | `object` | - |
 | nzIconType        | 图标 Icon 类型。<i>仅 确认框模式 下有效</i> | `string` | `'question-circle'` |
 | nzAutofocus        | 自动聚焦及聚焦位置，为 `null` 时禁用 | `'ok' \| 'cancel' \| 'auto' \| null` | `'auto'` |
 
 
-#### 注意
-
-> `nzComponentParams` 属性的创建或修改不会触发 `nzContent` 组件的 `ngOnChanges` 生命周期钩子。
-
 #### 采用服务方式创建普通模式对话框
 
 > 您可调用 `NzModalService.create(options)` 来动态创建**普通模式**对话框，这里的 `options` 是一个对象，支持上方API中给出的支持 **普通模式** 的参数

components/modal/modal-footer.component.ts

@@ -19,7 +19,7 @@ import { ModalButtonOptions, ModalOptions } from './modal-types';
   template: `
     <ng-container *ngIf="config.nzFooter; else defaultFooterButtons">
       <ng-container
-        *nzStringTemplateOutlet="config.nzFooter; context: { $implicit: config.nzComponentParams, modalRef: modalRef }"
+        *nzStringTemplateOutlet="config.nzFooter; context: { $implicit: config.nzData, modalRef: modalRef }"
       >
         <div *ngIf="!buttonsFooter" [innerHTML]="config.nzFooter"></div>
         <ng-container *ngIf="buttonsFooter">

components/modal/modal-types.ts

@@ -41,12 +41,6 @@ export class ModalOptions<T = NzSafeAny, D = NzSafeAny, R = NzSafeAny> {
   nzModalType?: ModalTypes = 'default';
   nzOnCancel?: EventEmitter<T> | OnClickCallback<T> = noopFun;
   nzOnOk?: EventEmitter<T> | OnClickCallback<T> = noopFun;
-
-  /**@deprecated
-   * it's better to use nzData for the future, to respect naming convention from Angular team
-   * must be remove for the nex major version
-   */
-  nzComponentParams?: Partial<T>;
   nzData?: D;
   nzMaskStyle?: StyleObjectLike;
   nzBodyStyle?: StyleObjectLike;

components/modal/modal.component.ts

@@ -70,7 +70,6 @@ export class NzModalComponent<T extends ModalOptions = NzSafeAny, R = NzSafeAny>
   @Input() @InputBoolean() nzNoAnimation = false;
   @Input() @InputBoolean() nzCentered = false;
   @Input() nzContent?: string | TemplateRef<{}> | Type<T>;
-  @Input() nzComponentParams?: T;
   @Input() nzFooter?: string | TemplateRef<{}> | Array<ModalButtonOptions<T>> | null;
   @Input() nzZIndex: number = 1000;
   @Input() nzWidth: number | string = 520;

components/modal/modal.service.ts

@@ -21,7 +21,7 @@ import { NzModalContainerComponent } from './modal-container.component';
 import { BaseModalContainerComponent } from './modal-container.directive';
 import { NzModalRef } from './modal-ref';
 import { ConfirmType, ModalOptions } from './modal-types';
-import { applyConfigDefaults, getValueWithConfig, setContentInstanceParams } from './utils';
+import { applyConfigDefaults, getValueWithConfig } from './utils';
 
 type ContentType<T> = ComponentType<T> | TemplateRef<T> | string;
 
@@ -179,7 +179,7 @@ export class NzModalService implements OnDestroy {
     if (componentOrTemplateRef instanceof TemplateRef) {
       modalContainer.attachTemplatePortal(
         new TemplatePortal<T>(componentOrTemplateRef, null!, {
-          $implicit: config.nzData || config.nzComponentParams,
+          $implicit: config.nzData,
           modalRef
         } as NzSafeAny)
       );
@@ -188,10 +188,6 @@ export class NzModalService implements OnDestroy {
       const contentRef = modalContainer.attachComponentPortal<T>(
         new ComponentPortal(componentOrTemplateRef, config.nzViewContainerRef, injector)
       );
-      /**@deprecated
-       * remove this method in the next major version now modal data are passed through injection
-       */
-      setContentInstanceParams<T>(contentRef.instance, config.nzComponentParams);
       modalRef.componentInstance = contentRef.instance;
     } else {
       modalContainer.attachStringContent();

components/modal/modal.spec.ts

@@ -124,9 +124,7 @@ describe('NzModal', () => {
   it('should open modal with component', () => {
     const modalRef = modalService.create({
       nzContent: TestWithModalContentComponent,
-      nzComponentParams: {
-        value: 'Modal'
-      }
+      nzData: 'Modal'
     });
 
     fixture.detectChanges();
@@ -142,9 +140,6 @@ describe('NzModal', () => {
   it('should open a modal with data', () => {
     const modalRef = modalService.create({
       nzContent: TestWithModalContentComponent,
-      nzComponentParams: {
-        value: 'Modal'
-      },
       nzData: 'NG-ZORRO'
     });
     fixture.detectChanges();
@@ -184,42 +179,10 @@ describe('NzModal', () => {
     expect(fixture.componentInstance.modalRef).toBe(modalRef);
     modalRef.close();
   });
-  it('should open modal with template and pass value of Nz data even if nzComponentParams is set', () => {
-    fixture.componentInstance.value = 'Modal';
-    fixture.detectChanges();
-    const modalRef = modalService.create({
-      nzContent: fixture.componentInstance.templateRef,
-      nzData: 'NG-ZORRO',
-      nzComponentParams: 'Angular Material'
-    });
-    fixture.detectChanges();
-    const modalContentElement = overlayContainerElement.querySelector('.modal-template-data');
-    expect(modalContentElement).toBeTruthy();
-    expect(modalContentElement!.textContent?.includes('NG-ZORRO')).toBeTruthy();
-    expect(fixture.componentInstance.modalRef).toBe(modalRef);
-    modalRef.close();
-  });
-  it('should open modal with template and pass value of nzComponentParams if nzData is not defined', () => {
-    fixture.componentInstance.value = 'Modal';
-    fixture.detectChanges();
-    const modalRef = modalService.create({
-      nzContent: fixture.componentInstance.templateRef,
-      nzComponentParams: 'NG-ZORRO'
-    });
-    fixture.detectChanges();
-    const modalContentElement = overlayContainerElement.querySelector('.modal-template-data');
-    expect(modalContentElement).toBeTruthy();
-    expect(modalContentElement!.textContent?.includes('NG-ZORRO')).toBeTruthy();
-    expect(fixture.componentInstance.modalRef).toBe(modalRef);
-    modalRef.close();
-  });
 
   it('should be thrown when attaching repeatedly', () => {
     const modalRefComponent = modalService.create({
-      nzContent: TestWithModalContentComponent,
-      nzComponentParams: {
-        value: 'Modal'
-      }
+      nzContent: TestWithModalContentComponent
     });
 
     expect(() => {
@@ -1483,9 +1446,7 @@ describe('NzModal', () => {
     it('should open confirm with component', () => {
       const modalRef = modalService.confirm({
         nzContent: TestWithModalContentComponent,
-        nzComponentParams: {
-          value: 'Confirm'
-        }
+        nzData: 'Confirm'
       });
 
       fixture.detectChanges();
@@ -1778,6 +1739,7 @@ class TestWithModalContentComponent {
   nzModalData: string;
 
   constructor(public modalRef: NzModalRef, public modalInjector: Injector, @Inject(NZ_MODAL_DATA) nzData: string) {
+    this.value = nzData;
     this.nzModalData = nzData;
   }
 

components/modal/utils.ts

@@ -21,16 +21,6 @@ export function getValueWithConfig<T>(
     : userValue;
 }
 
-/**
- * Assign the params into the content component instance.
- *
- * @deprecated Should use dependency injection to get the params for user
- * @breaking-change 14.0.0
- */
-export function setContentInstanceParams<T>(instance: T, params: Partial<T> | undefined): void {
-  Object.assign(<{}>instance, params);
-}
-
 export function getConfigFromComponent<T extends ModalOptions>(component: T): ModalOptions {
   const {
     nzCentered,
@@ -44,7 +34,6 @@ export function getConfigFromComponent<T extends ModalOptions>(component: T): Mo
     nzKeyboard,
     nzNoAnimation,
     nzContent,
-    nzComponentParams,
     nzFooter,
     nzZIndex,
     nzWidth,
@@ -80,7 +69,6 @@ export function getConfigFromComponent<T extends ModalOptions>(component: T): Mo
     nzKeyboard,
     nzNoAnimation,
     nzContent,
-    nzComponentParams,
     nzFooter,
     nzZIndex,
     nzWidth,