From 45863a1d62e5751416321cb1d591faf820bb82d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=A1=E8=89=B2?= Date: Wed, 19 Jul 2023 17:57:00 +0800 Subject: [PATCH] fix(theme:modal): removed `nzComponentParams` (#1615) --- package.json | 2 +- .../theme/src/services/modal/index.en-US.md | 1 + .../theme/src/services/modal/index.zh-CN.md | 1 + .../theme/src/services/modal/modal.helper.ts | 12 ++++++++-- .../theme/src/services/modal/modal.spec.ts | 22 +++++++++++++++---- 5 files changed, 31 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index ee0e38f6e..7be0dffb9 100644 --- a/package.json +++ b/package.json @@ -81,7 +81,7 @@ "extend": "^3.0.2", "file-saver": "^2.0.5", "ng-github-button": "^15.0.0", - "ng-zorro-antd": "^16.0.0", + "ng-zorro-antd": "^16.1.0", "ngx-color": "~9.0.0", "ngx-countdown": "^15.0.0", "ngx-highlight-js": "^15.0.0", diff --git a/packages/theme/src/services/modal/index.en-US.md b/packages/theme/src/services/modal/index.en-US.md index 23be6d41d..e1acdc51b 100644 --- a/packages/theme/src/services/modal/index.en-US.md +++ b/packages/theme/src/services/modal/index.en-US.md @@ -54,4 +54,5 @@ Your body content | `exact` | Exact match return value, default is `true`, If the return value is not null (`null` or `undefined`) is considered successful, otherwise it is considered error. | `boolean` | `true` | | `includeTabs` | Whether to wrap the tab page | `boolean` | `false` | | `drag` | Drag | `boolean, ModalHelperDragOptions` | - | +| `useNzData` | Whether it is mandatory to use `nzData` to pass parameters. If it is `false`, it means that the parameters will be directly mapped to the component instance, and other values ​​can only be obtained through `NZ_MODAL_DATA`. | `boolean` | `false` | | `modalOptions` | nz-modal raw parameters [ModalOptions](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/modal/modal-types.ts) | `ModalOptions` | - | diff --git a/packages/theme/src/services/modal/index.zh-CN.md b/packages/theme/src/services/modal/index.zh-CN.md index ef5389dd8..3b21a2e32 100644 --- a/packages/theme/src/services/modal/index.zh-CN.md +++ b/packages/theme/src/services/modal/index.zh-CN.md @@ -54,4 +54,5 @@ Your body content | `exact` | 是否精准（默认：`true`），若返回值非空值（`null`或`undefined`）视为成功，否则视为错误 | `boolean` | `true` | | `includeTabs` | 是否包裹标签页 | `boolean` | `false` | | `drag` | 支持拖动 | `boolean, ModalHelperDragOptions` | - | +| `useNzData` | 是否强制使用 `nzData` 传递参数，若为 `false` 表示参数会直接映射到组件实例中，其他值只能通过 `NZ_MODAL_DATA` 的方式来获取参数 | `boolean` | `false` | | `modalOptions` | 对话框 [ModalOptions](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/modal/modal-types.ts) 参数 | `ModalOptions` | - | diff --git a/packages/theme/src/services/modal/modal.helper.ts b/packages/theme/src/services/modal/modal.helper.ts index 58c5f5cb3..2af723ffc 100644 --- a/packages/theme/src/services/modal/modal.helper.ts +++ b/packages/theme/src/services/modal/modal.helper.ts @@ -20,6 +20,10 @@ export interface ModalHelperOptions { * 是否支持拖动，默认是通过标题来触发 */ drag?: ModalHelperDragOptions | boolean; + /** + * 是否强制使用 `nzData` 传递参数，若为 `false` 表示参数会直接映射到组件实例中，其他值只能通过 `NZ_MODAL_DATA` 的方式来获取参数，默认：`false` + */ + useNzData?: boolean; } export interface ModalHelperDragOptions { @@ -86,7 +90,7 @@ export class ModalHelper { options ); return new Observable((observer: Observer) => { - const { size, includeTabs, modalOptions, drag } = options as ModalHelperOptions; + const { size, includeTabs, modalOptions, drag, useNzData } = options as ModalHelperOptions; let cls = ''; let width = ''; if (size) { @@ -118,9 +122,13 @@ export class ModalHelper { nzContent: comp, nzWidth: width ? width : undefined, nzFooter: null, - nzComponentParams: params + nzData: params }; const subject = this.srv.create({ ...defaultOptions, ...modalOptions }); + // 保留 nzComponentParams 原有风格，但依然可以通过 @Inject(NZ_MODAL_DATA) 获取 + if (useNzData !== true) { + Object.assign(subject.componentInstance, params); + } subject.afterOpen .pipe( take(1), diff --git a/packages/theme/src/services/modal/modal.spec.ts b/packages/theme/src/services/modal/modal.spec.ts index 9575030ec..19f4678d0 100644 --- a/packages/theme/src/services/modal/modal.spec.ts +++ b/packages/theme/src/services/modal/modal.spec.ts @@ -1,9 +1,9 @@ import { CommonModule } from '@angular/common'; -import { Component, NgModule } from '@angular/core'; +import { Component, Inject, NgModule } from '@angular/core'; import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { NzModalModule, NzModalRef } from 'ng-zorro-antd/modal'; +import { NZ_MODAL_DATA, NzModalModule, NzModalRef } from 'ng-zorro-antd/modal'; import { AlainThemeModule } from '../../theme.module'; import { ModalHelper } from './modal.helper'; @@ -49,6 +49,17 @@ describe('theme: ModalHelper', () => { fixture.detectChanges(); expect(document.querySelector('.modal-include-tabs')).not.toBeNull(); })); + it('should be useNzData is true', fakeAsync(() => { + modal.create(TestModalComponent, { ret: 'a' }, { useNzData: true }).subscribe(() => { + expect(true).toBeTruthy(); + flush(); + }); + fixture.detectChanges(); + tick(1000); + fixture.detectChanges(); + expect(document.querySelector('.noNzData')?.innerText.trim()).toBe('true'); + expect(document.querySelector('.nzData')?.innerText.trim()).toBe('a'); + })); describe('#exact width true', () => { it('should be not trigger subscript when return a undefined value', fakeAsync(() => { modal.create(TestModalComponent, { ret: undefined }, { includeTabs: true, exact: true }).subscribe({ @@ -138,13 +149,16 @@ describe('theme: ModalHelper', () => { }); @Component({ - template: `
modal{{ id }}
` + template: ` +
{{ ret }}
+
{{ data.ret }}
+ ` }) class TestModalComponent { id = ''; ret = 'true'; - constructor(private modal: NzModalRef) { + constructor(private modal: NzModalRef, @Inject(NZ_MODAL_DATA) public data: { ret: string }) { setTimeout(() => { if (this.ret === 'destroy') { this.modal.destroy();