Skip to content

Commit f71162b

Browse files
Nicoss54Nicoss54
authored
feat(module:drawer): return componentRef when nzContent is a component (#8339)
1 parent 57cf8b3 commit f71162b

4 files changed

Lines changed: 39 additions & 22 deletions

File tree

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

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,13 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
2626
### nz-drawer:standalone
2727

2828
| Props | Description | Type | Default | Global Config |
29-
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------- | ------------- |
29+
|-------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------|-------------|---------------|
3030
| `[nzClosable]` | Whether a close (x) button is visible on top left of the Drawer dialog or not. | `boolean` | `true` |
3131
| `[nzCloseIcon]` | Custom close icon | `string \| TemplateRef<void> \| null` | `'close'` |
3232
| `[nzExtra]` | Extra actions area at corner. | `string \| TemplateRef<void> \| null` | - |
33-
| `[nzMask]` | Whether to show mask or not. | `boolean` | `true` | ✅ |
34-
| `[nzMaskClosable]` | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` | `true` | ✅ |
35-
| `[nzCloseOnNavigation]` | Whether to close the drawer when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy). | `boolean` | `true` | ✅ |
33+
| `[nzMask]` | Whether to show mask or not. | `boolean` | `true` | ✅ |
34+
| `[nzMaskClosable]` | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` | `true` | ✅ |
35+
| `[nzCloseOnNavigation]` | Whether to close the drawer when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy). | `boolean` | `true` | ✅ |
3636
| `[nzKeyboard]` | Whether support press esc to close | `boolean` | `true` |
3737
| `[nzMaskStyle]` | Style for Drawer's mask element. | `object` | `{}` |
3838
| `[nzBodyStyle]` | Body style for drawer body element. Such as height, padding etc. | `object` | `{}` |
@@ -52,24 +52,24 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
5252
### NzDrawerService
5353

5454
| Method | Description | Params | Return |
55-
| --------------- | ------------------------- | ----------------------- | ------------------- |
55+
|-----------------|---------------------------|-------------------------|---------------------|
5656
| create<T, D, R> | create and open an Drawer | `NzDrawerOptions<T, D>` | `NzDrawerRef<T, R>` |
5757

5858
### NzDrawerOptions
5959

6060
| Params | Description | Type | Default | Global Config |
61-
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ----------- | ------------- |
61+
|---------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------|-------------|---------------|
6262
| nzContent | The drawer body content. | `TemplateRef<{ $implicit: D, drawerRef: NzDrawerRef }> \| Type<T>` | - |
6363
| nzContentParams | Deprecated: Use NzData instead. The component inputs the param / The Template context | `D` | - |
6464
| nzData | Will be a template variable when nzContent is TemplateRef. <br /> object, will be the value of the injection token NZ_MODAL_DATA when nzContent is a component | `D` | - |
6565
| nzClosable | Whether a close (x) button is visible on top left of the Drawer dialog or not. | `boolean` | `true` |
6666
| nzCloseIcon | Custom close icon | `string \| TemplateRef<void> \| null` | `'close'` |
6767
| nzExtra | Extra actions area at corner. | `string \| TemplateRef<void> \| null` | - |
6868
| nzOnCancel | Execute when click on the mask or the upper cancel button, This function returns a promise, which is automatically closed when the execution is complete or the promise ends (return false to prevent closing) | `() => Promise<any>` | - |
69-
| nzMaskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` | `true` | ✅ |
70-
| nzCloseOnNavigation | Whether to close the drawer when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy). | `boolean` | `true` | ✅ |
71-
| nzMask | Whether to show mask or not. | `boolean` | `true` | ✅ |
72-
| nzDirection | Direction of the text in the modal | `'ltr' \| 'rtl'` | - | ✅ |
69+
| nzMaskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` | `true` | ✅ |
70+
| nzCloseOnNavigation | Whether to close the drawer when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy). | `boolean` | `true` | ✅ |
71+
| nzMask | Whether to show mask or not. | `boolean` | `true` | ✅ |
72+
| nzDirection | Direction of the text in the modal | `'ltr' \| 'rtl'` | - | ✅ |
7373
| nzKeyboard | Whether support press esc to close | `boolean` | `true` |
7474
| nzMaskStyle | Style for Drawer's mask element. | `object` | `{}` |
7575
| nzBodyStyle | Body style for modal body element. Such as height, padding etc. | `object` | `{}` |
@@ -86,22 +86,25 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
8686

8787
### NZ_DRAWER_DATA
8888

89-
NZ_DRAWER_DATA injection token is used to retrieve nzData in the custom component. The drawer created by the service method NzDrawerService.create() inject a NZ_DRAWER_DATA token (if nzContent is used as Component) to retrieve the parameters that have used to the 'nzContent component'
89+
NZ_DRAWER_DATA injection token is used to retrieve nzData in the custom component. The drawer created by the service
90+
method NzDrawerService.create() inject a NZ_DRAWER_DATA token (if nzContent is used as Component) to retrieve the
91+
parameters that have used to the 'nzContent component'
9092

9193
### NzDrawerRef
9294

9395
#### Methods
9496

95-
| Name | Description | Type |
96-
| ------------------- | ------------------------------------------------------- | ---------------------- |
97-
| close | close the drawer. | `(result?: R) => void` |
98-
| open | open the drawer. | `() => void` |
99-
| getContentComponent | Returns the instance when `nzContent` is the component. | `() => T \| null` |
97+
| Name | Description | Type |
98+
|------------------------|---------------------------------------------------------------------------|---------------------------------|
99+
| close | close the drawer. | `(result?: R) => void` |
100+
| open | open the drawer. | `() => void` |
101+
| getContentComponent | Returns the instance when `nzContent` is the component. | `() => T \| null` |
102+
| getContentComponentRef | Returns the reference of the component when `nzContent` is the component. | `() => ComponentRef<T> \| null` |
100103

101104
#### Property
102105

103106
| Name | Description | Type |
104-
| --------------- | ------------------------------------------------------------------------------- | ---------------------------------------- |
107+
|-----------------|---------------------------------------------------------------------------------|------------------------------------------|
105108
| afterOpen | Callback called after open. | `Observable<void>` |
106109
| afterClose | Callback called after close. | `Observable<R>` |
107110
| nzCloseIcon | Custom close icon | `string \| TemplateRef<void> \| null` |

‎components/drawer/drawer-ref.ts‎

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

6-
import { TemplateRef } from '@angular/core';
6+
import { ComponentRef, TemplateRef } from '@angular/core';
77
import { Observable } from 'rxjs';
88

99
import { NzSafeAny } from 'ng-zorro-antd/core/types';
@@ -16,6 +16,7 @@ export abstract class NzDrawerRef<T = NzSafeAny, R = NzSafeAny> {
1616
abstract close(result?: R): void;
1717
abstract open(): void;
1818
abstract getContentComponent(): T | null;
19+
abstract getContentComponentRef(): Readonly<ComponentRef<T>> | null;
1920

2021
abstract nzClosable?: boolean;
2122
abstract nzNoAnimation?: boolean;

‎components/drawer/drawer.component.ts‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
ChangeDetectionStrategy,
1515
ChangeDetectorRef,
1616
Component,
17+
ComponentRef,
1718
ContentChild,
1819
EventEmitter,
1920
Inject,
@@ -184,6 +185,7 @@ export class NzDrawerComponent<T extends {} = NzSafeAny, R = NzSafeAny, D extend
184185
@Input() nzOffsetX = 0;
185186
@Input() nzOffsetY = 0;
186187
private componentInstance: T | null = null;
188+
private componentRef: ComponentRef<T> | null = null;
187189

188190
@Input()
189191
set nzVisible(value: boolean) {
@@ -387,6 +389,7 @@ export class NzDrawerComponent<T extends {} = NzSafeAny, R = NzSafeAny, D extend
387389
this.nzAfterClose.next(result);
388390
this.nzAfterClose.complete();
389391
this.componentInstance = null;
392+
this.componentRef = null;
390393
}, this.getAnimationDuration());
391394
}
392395

@@ -412,6 +415,10 @@ export class NzDrawerComponent<T extends {} = NzSafeAny, R = NzSafeAny, D extend
412415
return this.componentInstance;
413416
}
414417

418+
override getContentComponentRef(): ComponentRef<T> | null {
419+
return this.componentRef;
420+
}
421+
415422
closeClick(): void {
416423
this.nzOnClose.emit();
417424
}
@@ -434,13 +441,14 @@ export class NzDrawerComponent<T extends {} = NzSafeAny, R = NzSafeAny, D extend
434441
]
435442
});
436443
const componentPortal = new ComponentPortal<T>(this.nzContent, null, childInjector);
437-
const componentRef = this.bodyPortalOutlet!.attachComponentPortal(componentPortal);
438-
this.componentInstance = componentRef.instance;
444+
this.componentRef = this.bodyPortalOutlet!.attachComponentPortal(componentPortal);
445+
446+
this.componentInstance = this.componentRef.instance;
439447
/**TODO
440448
* When nzContentParam will be remove in the next major version, we have to remove the following line
441449
* **/
442-
Object.assign(componentRef.instance!, this.nzData || this.nzContentParams);
443-
componentRef.changeDetectorRef.detectChanges();
450+
Object.assign(this.componentRef.instance!, this.nzData || this.nzContentParams);
451+
this.componentRef.changeDetectorRef.detectChanges();
444452
}
445453
}
446454

‎components/drawer/drawer.spec.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -697,6 +697,7 @@ describe('NzDrawerService', () => {
697697
fixture.detectChanges();
698698
tick(300);
699699
expect(component.templateDrawerRef?.getContentComponent()).toBeNull();
700+
expect(component.templateDrawerRef?.getContentComponentRef()).toBeNull();
700701
expect(component.templateOpenSpy).toHaveBeenCalled();
701702
fixture.detectChanges();
702703
(overlayContainerElement.querySelector('.ant-drawer .ant-drawer-mask') as HTMLElement).click();
@@ -719,6 +720,7 @@ describe('NzDrawerService', () => {
719720
fixture.detectChanges();
720721
expect(openSpy).not.toHaveBeenCalled();
721722
expect(drawerRef.getContentComponent()).not.toBeNull();
723+
expect(drawerRef.getContentComponentRef()).not.toBeNull();
722724
tick(300);
723725
expect(openSpy).toHaveBeenCalled();
724726
(overlayContainerElement.querySelector('.ant-drawer .close-btn') as HTMLElement).click();
@@ -727,6 +729,7 @@ describe('NzDrawerService', () => {
727729
expect(closeSpy).toHaveBeenCalled();
728730
fixture.detectChanges();
729731
expect(drawerRef.getContentComponent()).toBeNull();
732+
expect(drawerRef.getContentComponentRef()).toBeNull();
730733
}));
731734

732735
it('should create a component drawer and use nzData instead of nzContentParams', fakeAsync(() => {
@@ -744,6 +747,7 @@ describe('NzDrawerService', () => {
744747
fixture.detectChanges();
745748
expect(openSpy).not.toHaveBeenCalled();
746749
expect(drawerRef.getContentComponent()).not.toBeNull();
750+
expect(drawerRef.getContentComponentRef()).not.toBeNull();
747751
tick(300);
748752
expect(openSpy).toHaveBeenCalled();
749753
(overlayContainerElement.querySelector('.ant-drawer .close-btn') as HTMLElement).click();
@@ -752,6 +756,7 @@ describe('NzDrawerService', () => {
752756
expect(closeSpy).toHaveBeenCalled();
753757
fixture.detectChanges();
754758
expect(drawerRef.getContentComponent()).toBeNull();
759+
expect(drawerRef.getContentComponentRef()).toBeNull();
755760
}));
756761

757762
it('should `nzOnCancel` work', fakeAsync(() => {

0 commit comments

Comments
 (0)