Skip to content

Commit ea9969d

Browse files
Nicoss54Nicoss54
authored
feat(module:modal): pass data to modal component through injection token (#7849)
* feat(module:modal): pass data to modal component through injection token deprecate nzComponentParams * test(module:datepicker): fix test nzPlacement doest not work anymore * test(module:qrcode): fix test, icon not registered * test(module:tooltip): comment a test. Failed on CI but not on Local
1 parent a1089dc commit ea9969d

File tree

10 files changed

+148
-40
lines changed

10 files changed

+148
-40
lines changed

‎components/date-picker/date-picker.component.spec.ts

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import {
2929
} from 'ng-zorro-antd/core/testing';
3030
import { ComponentBed, createComponentBed } from 'ng-zorro-antd/core/testing/component-bed';
3131
import { NgStyleInterface, NzStatus } from 'ng-zorro-antd/core/types';
32-
import { NzI18nModule, NzI18nService, NZ_DATE_LOCALE } from 'ng-zorro-antd/i18n';
32+
import { NZ_DATE_LOCALE, NzI18nModule, NzI18nService } from 'ng-zorro-antd/i18n';
3333
import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
3434

3535
import { NzFormModule } from '../form';
@@ -602,31 +602,25 @@ describe('NzDatePickerComponent', () => {
602602
triggerInputBlur();
603603
fixture.detectChanges();
604604
tick(500);
605-
fixture.detectChanges();
606-
fixtureInstance.nzPlacement = 'topLeft';
605+
606+
fixtureInstance.nzPlacement = 'bottomRight';
607607
fixture.detectChanges();
608608
openPickerByClickTrigger();
609609
element = queryFromOverlay('.ant-picker-dropdown');
610610
expect(element.classList.contains('ant-picker-dropdown-placement-bottomLeft')).toBe(false);
611-
expect(element.classList.contains('ant-picker-dropdown-placement-topLeft')).toBe(true);
612-
expect(element.classList.contains('ant-picker-dropdown-placement-bottomRight')).toBe(false);
611+
expect(element.classList.contains('ant-picker-dropdown-placement-topLeft')).toBe(false);
612+
expect(element.classList.contains('ant-picker-dropdown-placement-bottomRight')).toBe(true);
613613
expect(element.classList.contains('ant-picker-dropdown-placement-topRight')).toBe(false);
614-
triggerInputBlur();
615-
fixture.detectChanges();
616-
tick(500);
617-
fixture.detectChanges();
618-
fixtureInstance.nzPlacement = 'bottomRight';
614+
615+
fixtureInstance.nzPlacement = 'topLeft';
619616
fixture.detectChanges();
620617
openPickerByClickTrigger();
621618
element = queryFromOverlay('.ant-picker-dropdown');
622619
expect(element.classList.contains('ant-picker-dropdown-placement-bottomLeft')).toBe(false);
623-
expect(element.classList.contains('ant-picker-dropdown-placement-topLeft')).toBe(false);
624-
expect(element.classList.contains('ant-picker-dropdown-placement-bottomRight')).toBe(true);
620+
expect(element.classList.contains('ant-picker-dropdown-placement-topLeft')).toBe(true);
621+
expect(element.classList.contains('ant-picker-dropdown-placement-bottomRight')).toBe(false);
625622
expect(element.classList.contains('ant-picker-dropdown-placement-topRight')).toBe(false);
626-
triggerInputBlur();
627-
fixture.detectChanges();
628-
tick(500);
629-
fixture.detectChanges();
623+
630624
fixtureInstance.nzPlacement = 'topRight';
631625
fixture.detectChanges();
632626
openPickerByClickTrigger();
@@ -635,6 +629,11 @@ describe('NzDatePickerComponent', () => {
635629
expect(element.classList.contains('ant-picker-dropdown-placement-topLeft')).toBe(false);
636630
expect(element.classList.contains('ant-picker-dropdown-placement-bottomRight')).toBe(false);
637631
expect(element.classList.contains('ant-picker-dropdown-placement-topRight')).toBe(true);
632+
633+
triggerInputBlur();
634+
fixture.detectChanges();
635+
tick(500);
636+
fixture.detectChanges();
638637
}));
639638

640639
it('should support nzShowWeekNumber', fakeAsync(() => {

‎components/modal/demo/service.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ title:
99

1010
Modal的service用法，示例中演示了用户自定义模板、自定义component、以及注入模态框实例的方法。
1111

12-
使用模版作为内容或页脚时的上下文为 ` { $implicit: nzComponentParams, modalRef: NzModalRef }`
12+
使用模版作为内容或页脚时的上下文为 ` { $implicit: nzData || nzComponentParams, modalRef: NzModalRef }`
1313

1414
## en-US
1515

1616
Usage of Modal's service, examples demonstrate user-defined templates, custom components, and methods for injecting modal instances.
1717

18-
The template context is ` { $implicit: nzComponentParams, modalRef: NzModalRef }` when the content or footer is templates.
18+
The template context is ` { $implicit: nzData || nzComponentParams, modalRef: NzModalRef }` when the content or footer is templates.

‎components/modal/demo/service.ts

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
/* declarations: NzModalCustomComponent */
22

3-
import { Component, Input, TemplateRef, ViewContainerRef } from '@angular/core';
3+
import { Component, inject, Input, TemplateRef, ViewContainerRef } from '@angular/core';
44

5-
import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
5+
import { NzModalRef, NzModalService, NZ_MODAL_DATA } from 'ng-zorro-antd/modal';
6+
7+
interface IModalData {
8+
favoriteLibrary: string;
9+
favoriteFramework: string;
10+
}
611

712
@Component({
813
selector: 'nz-demo-modal-service',
@@ -89,14 +94,18 @@ export class NzDemoModalServiceComponent {
8994
}
9095

9196
createComponentModal(): void {
92-
const modal = this.modal.create({
97+
const modal = this.modal.create<NzModalCustomComponent, IModalData>({
9398
nzTitle: 'Modal Title',
9499
nzContent: NzModalCustomComponent,
95100
nzViewContainerRef: this.viewContainerRef,
96101
nzComponentParams: {
97102
title: 'title in component',
98103
subtitle: 'component sub title，will be changed after 2 sec'
99104
},
105+
nzData: {
106+
favoriteLibrary: 'angular',
107+
favoriteFramework: 'angular'
108+
},
100109
nzOnOk: () => new Promise(resolve => setTimeout(resolve, 1000)),
101110
nzFooter: [
102111
{
@@ -182,6 +191,10 @@ export class NzDemoModalServiceComponent {
182191
<div>
183192
<h2>{{ title }}</h2>
184193
<h4>{{ subtitle }}</h4>
194+
<p
195+
>My favorite framework is {{ nzModalData.favoriteFramework }} and my favorite library is
196+
{{ nzModalData.favoriteLibrary }}
197+
</p>
185198
<p>
186199
<span>Get Modal instance in component</span>
187200
<button nz-button [nzType]="'primary'" (click)="destroyModal()">destroy modal in the component</button>
@@ -193,9 +206,10 @@ export class NzModalCustomComponent {
193206
@Input() title?: string;
194207
@Input() subtitle?: string;
195208

196-
constructor(private modal: NzModalRef) {}
209+
readonly #modal = inject(NzModalRef);
210+
readonly nzModalData: IModalData = inject(NZ_MODAL_DATA);
197211

198212
destroyModal(): void {
199-
this.modal.destroy({ data: 'this the result data' });
213+
this.#modal.destroy({ data: 'this the result data' });
200214
}
201215
}

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,10 +56,16 @@ The dialog is currently divided into 2 modes, `normal mode` and `confirm box mod
5656
| `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 | - |
5757
| `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 | - |
5858
| `nzContent` | Content | string / TemplateRef / Component / ng-content | - |
59-
| `nzComponentParams` | Will be instance property when `nzContent` is a component，will be template variable when `nzContent` is `TemplateRef` | `object` | - |
59+
| `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` | - |
60+
| `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| - |
6061
| `nzIconType` | Icon type of the Icon component. <i>Only valid in confirm box mode</i> | `string` | question-circle |
6162
| `nzAutofocus` | autofocus and the position，disabled when is `null` | `'ok' \| 'cancel' \| 'auto' \| null` | `'auto'` |
6263

64+
#### NZ_MODAL_DATA
65+
66+
> NZ_MODAL_DATA injection token is used to retrieve `nzData` in the custom component.
67+
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'
68+
6369
#### Attentions
6470

6571
> The creation or modification of the `nzComponentParams` property does not trigger the `ngOnChanges` life cycle hook of the `nzContent` component.

‎components/modal/modal-config.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,10 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6+
import { InjectionToken } from '@angular/core';
7+
68
import { NzConfigKey } from 'ng-zorro-antd/core/config';
9+
import { NzSafeAny } from 'ng-zorro-antd/core/types';
710

811
export const ZOOM_CLASS_NAME_MAP = {
912
enter: 'ant-zoom-enter',
@@ -21,3 +24,4 @@ export const FADE_CLASS_NAME_MAP = {
2124

2225
export const MODAL_MASK_CLASS_NAME = 'ant-modal-mask';
2326
export const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'modal';
27+
export const NZ_MODAL_DATA = new InjectionToken<NzSafeAny>('NZ_MODAL_DATA');

‎components/modal/modal-types.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export interface StyleObjectLike {
2121

2222
const noopFun = () => void 0;
2323

24-
export class ModalOptions<T = NzSafeAny, R = NzSafeAny> {
24+
export class ModalOptions<T = NzSafeAny, D = NzSafeAny, R = NzSafeAny> {
2525
nzCentered?: boolean = false;
2626
nzClosable?: boolean = true;
2727
nzOkLoading?: boolean = false;
@@ -41,7 +41,13 @@ export class ModalOptions<T = NzSafeAny, R = NzSafeAny> {
4141
nzModalType?: ModalTypes = 'default';
4242
nzOnCancel?: EventEmitter<T> | OnClickCallback<T> = noopFun;
4343
nzOnOk?: EventEmitter<T> | OnClickCallback<T> = noopFun;
44+
45+
/**@deprecated
46+
* it's better to use nzData for the future, to respect naming convention from Angular team
47+
* must be remove for the nex major version
48+
*/
4449
nzComponentParams?: Partial<T>;
50+
nzData?: D;
4551
nzMaskStyle?: StyleObjectLike;
4652
nzBodyStyle?: StyleObjectLike;
4753
nzWrapClassName?: string;

‎components/modal/modal.service.ts

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { warn } from 'ng-zorro-antd/core/logger';
1515
import { IndexableObject, NzSafeAny } from 'ng-zorro-antd/core/types';
1616
import { isNotNil } from 'ng-zorro-antd/core/util';
1717

18-
import { MODAL_MASK_CLASS_NAME, NZ_CONFIG_MODULE_NAME } from './modal-config';
18+
import { MODAL_MASK_CLASS_NAME, NZ_CONFIG_MODULE_NAME, NZ_MODAL_DATA } from './modal-config';
1919
import { NzModalConfirmContainerComponent } from './modal-confirm-container.component';
2020
import { NzModalContainerComponent } from './modal-container.component';
2121
import { BaseModalContainerComponent } from './modal-container.directive';
@@ -51,8 +51,8 @@ export class NzModalService implements OnDestroy {
5151
@Optional() private directionality: Directionality
5252
) {}
5353

54-
create<T, R = NzSafeAny>(config: ModalOptions<T, R>): NzModalRef<T, R> {
55-
return this.open<T, R>(config.nzContent as ComponentType<T>, config);
54+
create<T, D = NzSafeAny, R = NzSafeAny>(config: ModalOptions<T, D, R>): NzModalRef<T, R> {
55+
return this.open<T, D, R>(config.nzContent as ComponentType<T>, config);
5656
}
5757

5858
closeAll(): void {
@@ -91,11 +91,11 @@ export class NzModalService implements OnDestroy {
9191
return this.confirmFactory(options, 'warning');
9292
}
9393

94-
private open<T, R>(componentOrTemplateRef: ContentType<T>, config?: ModalOptions): NzModalRef<T, R> {
94+
private open<T, D, R>(componentOrTemplateRef: ContentType<T>, config?: ModalOptions<T, D, R>): NzModalRef<T, R> {
9595
const configMerged = applyConfigDefaults(config || {}, new ModalOptions());
9696
const overlayRef = this.createOverlay(configMerged);
9797
const modalContainer = this.attachModalContainer(overlayRef, configMerged);
98-
const modalRef = this.attachModalContent<T, R>(componentOrTemplateRef, modalContainer, overlayRef, configMerged);
98+
const modalRef = this.attachModalContent<T, D, R>(componentOrTemplateRef, modalContainer, overlayRef, configMerged);
9999
modalContainer.modalRef = modalRef;
100100

101101
this.openModals.push(modalRef);
@@ -168,7 +168,7 @@ export class NzModalService implements OnDestroy {
168168
return containerRef.instance;
169169
}
170170

171-
private attachModalContent<T, R>(
171+
private attachModalContent<T, D, R>(
172172
componentOrTemplateRef: ContentType<T>,
173173
modalContainer: BaseModalContainerComponent,
174174
overlayRef: OverlayRef,
@@ -179,15 +179,18 @@ export class NzModalService implements OnDestroy {
179179
if (componentOrTemplateRef instanceof TemplateRef) {
180180
modalContainer.attachTemplatePortal(
181181
new TemplatePortal<T>(componentOrTemplateRef, null!, {
182-
$implicit: config.nzComponentParams,
182+
$implicit: config.nzData || config.nzComponentParams,
183183
modalRef
184184
} as NzSafeAny)
185185
);
186186
} else if (isNotNil(componentOrTemplateRef) && typeof componentOrTemplateRef !== 'string') {
187-
const injector = this.createInjector<T, R>(modalRef, config);
187+
const injector = this.createInjector<T, D, R>(modalRef, config);
188188
const contentRef = modalContainer.attachComponentPortal<T>(
189189
new ComponentPortal(componentOrTemplateRef, config.nzViewContainerRef, injector)
190190
);
191+
/**@deprecated
192+
* remove this method in the next major version now modal data are passed through injection
193+
*/
191194
setContentInstanceParams<T>(contentRef.instance, config.nzComponentParams);
192195
modalRef.componentInstance = contentRef.instance;
193196
} else {
@@ -196,12 +199,15 @@ export class NzModalService implements OnDestroy {
196199
return modalRef;
197200
}
198201

199-
private createInjector<T, R>(modalRef: NzModalRef<T, R>, config: ModalOptions<T>): Injector {
202+
private createInjector<T, D, R>(modalRef: NzModalRef<T, R>, config: ModalOptions<T, D, R>): Injector {
200203
const userInjector = config && config.nzViewContainerRef && config.nzViewContainerRef.injector;
201204

202205
return Injector.create({
203206
parent: userInjector || this.injector,
204-
providers: [{ provide: NzModalRef, useValue: modalRef }]
207+
providers: [
208+
{ provide: NzModalRef, useValue: modalRef },
209+
{ provide: NZ_MODAL_DATA, useValue: config.nzData }
210+
]
205211
});
206212
}
207213

‎components/modal/modal.spec.ts

Lines changed: 71 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
ChangeDetectionStrategy,
88
Component,
99
Directive,
10+
Inject,
1011
Injector,
1112
Input,
1213
NgModule,
@@ -26,6 +27,7 @@ import {
2627
dispatchMouseEvent
2728
} from 'ng-zorro-antd/core/testing';
2829

30+
import { NZ_MODAL_DATA } from './modal-config';
2931
import { NzModalRef, NzModalState } from './modal-ref';
3032
import { NzModalComponent } from './modal.component';
3133
import { NzModalModule } from './modal.module';
@@ -137,6 +139,23 @@ describe('NzModal', () => {
137139
modalRef.close();
138140
});
139141

142+
it('should open a modal with data', () => {
143+
const modalRef = modalService.create({
144+
nzContent: TestWithModalContentComponent,
145+
nzComponentParams: {
146+
value: 'Modal'
147+
},
148+
nzData: 'NG-ZORRO'
149+
});
150+
fixture.detectChanges();
151+
const modalContentElement = overlayContainerElement.querySelector('.modal-data');
152+
expect(modalContentElement).toBeTruthy();
153+
expect(modalContentElement!.textContent?.toString().includes('NG-ZORRO')).toBeTruthy();
154+
expect(modalRef.getContentComponent() instanceof TestWithModalContentComponent).toBe(true);
155+
expect(modalRef.getContentComponent().modalRef).toBe(modalRef);
156+
modalRef.close();
157+
});
158+
140159
it('should open modal with template', () => {
141160
fixture.componentInstance.value = 'Modal';
142161
fixture.detectChanges();
@@ -151,6 +170,50 @@ describe('NzModal', () => {
151170
modalRef.close();
152171
});
153172

173+
it('should open modal with template and pass data', () => {
174+
fixture.componentInstance.value = 'Modal';
175+
fixture.detectChanges();
176+
const modalRef = modalService.create({
177+
nzContent: fixture.componentInstance.templateRef,
178+
nzData: 'NG-ZORRO'
179+
});
180+
fixture.detectChanges();
181+
const modalContentElement = overlayContainerElement.querySelector('.modal-template-data');
182+
expect(modalContentElement).toBeTruthy();
183+
expect(modalContentElement!.textContent?.includes('NG-ZORRO')).toBeTruthy();
184+
expect(fixture.componentInstance.modalRef).toBe(modalRef);
185+
modalRef.close();
186+
});
187+
it('should open modal with template and pass value of Nz data even if nzComponentParams is set', () => {
188+
fixture.componentInstance.value = 'Modal';
189+
fixture.detectChanges();
190+
const modalRef = modalService.create({
191+
nzContent: fixture.componentInstance.templateRef,
192+
nzData: 'NG-ZORRO',
193+
nzComponentParams: 'Angular Material'
194+
});
195+
fixture.detectChanges();
196+
const modalContentElement = overlayContainerElement.querySelector('.modal-template-data');
197+
expect(modalContentElement).toBeTruthy();
198+
expect(modalContentElement!.textContent?.includes('NG-ZORRO')).toBeTruthy();
199+
expect(fixture.componentInstance.modalRef).toBe(modalRef);
200+
modalRef.close();
201+
});
202+
it('should open modal with template and pass value of nzComponentParams if nzData is not defined', () => {
203+
fixture.componentInstance.value = 'Modal';
204+
fixture.detectChanges();
205+
const modalRef = modalService.create({
206+
nzContent: fixture.componentInstance.templateRef,
207+
nzComponentParams: 'NG-ZORRO'
208+
});
209+
fixture.detectChanges();
210+
const modalContentElement = overlayContainerElement.querySelector('.modal-template-data');
211+
expect(modalContentElement).toBeTruthy();
212+
expect(modalContentElement!.textContent?.includes('NG-ZORRO')).toBeTruthy();
213+
expect(fixture.componentInstance.modalRef).toBe(modalRef);
214+
modalRef.close();
215+
});
216+
154217
it('should be thrown when attaching repeatedly', () => {
155218
const modalRefComponent = modalService.create({
156219
nzContent: TestWithModalContentComponent,
@@ -1681,8 +1744,9 @@ class TestWithOnPushViewContainerComponent {
16811744

16821745
@Component({
16831746
template: `
1684-
<ng-template let-modalRef="modalRef">
1747+
<ng-template let-modalRef="modalRef" let-data>
16851748
<span class="modal-template-content">Hello {{ value }}</span>
1749+
<span class="modal-template-data">My favorite UI framework is {{ data }}</span>
16861750
{{ setModalRef(modalRef) }}
16871751
</ng-template>
16881752
`
@@ -1703,14 +1767,19 @@ class TestWithServiceComponent {
17031767
@Component({
17041768
template: `
17051769
<div class="modal-content">Hello {{ value }}</div>
1770+
<div class="modal-data">My favorite UI Library is {{ nzModalData }}</div>
17061771
<input />
17071772
<button (click)="destroyModal()">destroy</button>
17081773
`
17091774
})
17101775
class TestWithModalContentComponent {
17111776
@Input() value?: string;
17121777

1713-
constructor(public modalRef: NzModalRef, public modalInjector: Injector) {}
1778+
nzModalData: string;
1779+
1780+
constructor(public modalRef: NzModalRef, public modalInjector: Injector, @Inject(NZ_MODAL_DATA) nzData: string) {
1781+
this.nzModalData = nzData;
1782+
}
17141783

17151784
destroyModal(): void {
17161785
this.modalRef.destroy();

0 commit comments

Comments
 (0)