feat(module:drawer): support get component instance for content (NG-Z…

…ORRO#5498)

close NG-ZORRO#5489, close NG-ZORRO#3283

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

@@ -45,7 +45,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 
 | Method | Description | Params | Return |
 | --- | --- | --- | --- |
-| create | create and open an Drawer | `NzDrawerOptions<T, D, R>`| `NzDrawerRef<R>` |
+| create<T, D, R> | create and open an Drawer | `NzDrawerOptions<T, D>`| `NzDrawerRef<T, R>` |
 
 ### NzDrawerOptions
 
@@ -77,7 +77,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | --- | --- | --- |
 | close | close the drawer. | `(result?: R) => void` |
 | open | open the drawer. | `() => void` |
-
+| getContentComponent| Returns the instance when `nzContent` is the component. | `() => T \| null` |
 
 #### Property
 | Name | Description | Type |

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

@@ -44,7 +44,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 
 | 方法名 | 说明 | 参数 | 返回 |
 | --- | --- | --- | --- |
-| create | 创建并打开一个 Drawer | `NzDrawerOptions<T, D, R>`| `NzDrawerRef<R>` |
+| create<T, D, R> | 创建并打开一个 Drawer | `NzDrawerOptions<T, D>`| `NzDrawerRef<T, R>` |
 
 ### NzDrawerOptions
 
@@ -77,6 +77,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | --- | --- | --- |
 | close | 关闭 Drawer | `(result?: R) => void` |
 | open | 打开 Drawer | `() => void` |
+| getContentComponent|  返回 `nzContent` 为组件时的组件实例 | `() => T \| null` |
 
 #### 属性
 

components/drawer/drawer-ref.ts

@@ -8,11 +8,12 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { Observable } from 'rxjs';
 import { NzDrawerPlacement } from './drawer-options';
 
-export abstract class NzDrawerRef<R = NzSafeAny> {
+export abstract class NzDrawerRef<T = NzSafeAny, R = NzSafeAny> {
   abstract afterClose: Observable<R>;
   abstract afterOpen: Observable<void>;
   abstract close(result?: R): void;
   abstract open(): void;
+  abstract getContentComponent(): T | null;
 
   abstract nzClosable?: boolean;
   abstract nzNoAnimation?: boolean;

components/drawer/drawer.component.ts

@@ -94,7 +94,7 @@ const NZ_CONFIG_COMPONENT_NAME = 'drawer';
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class NzDrawerComponent<T = NzSafeAny, R = NzSafeAny, D = NzSafeAny> extends NzDrawerRef<R>
+export class NzDrawerComponent<T = NzSafeAny, R = NzSafeAny, D = NzSafeAny> extends NzDrawerRef<T, R>
   implements OnInit, OnDestroy, AfterViewInit, OnChanges, NzDrawerOptionsOfComponent {
   static ngAcceptInputType_nzClosable: BooleanInput;
   static ngAcceptInputType_nzMaskClosable: BooleanInput;
@@ -120,6 +120,7 @@ export class NzDrawerComponent<T = NzSafeAny, R = NzSafeAny, D = NzSafeAny> exte
   @Input() nzZIndex = 1000;
   @Input() nzOffsetX = 0;
   @Input() nzOffsetY = 0;
+  private componentInstance: T | null = null;
 
   @Input()
   set nzVisible(value: boolean) {
@@ -288,6 +289,7 @@ export class NzDrawerComponent<T = NzSafeAny, R = NzSafeAny, D = NzSafeAny> exte
       this.restoreFocus();
       this.nzAfterClose.next(result);
       this.nzAfterClose.complete();
+      this.componentInstance = null;
     }, this.getAnimationDuration());
   }
 
@@ -305,6 +307,10 @@ export class NzDrawerComponent<T = NzSafeAny, R = NzSafeAny, D = NzSafeAny> exte
     }, this.getAnimationDuration());
   }
 
+  getContentComponent(): T | null {
+    return this.componentInstance;
+  }
+
   closeClick(): void {
     this.nzOnClose.emit();
   }
@@ -322,6 +328,7 @@ export class NzDrawerComponent<T = NzSafeAny, R = NzSafeAny, D = NzSafeAny> exte
       const childInjector = new PortalInjector(this.injector, new WeakMap([[NzDrawerRef, this]]));
       const componentPortal = new ComponentPortal<T>(this.nzContent, null, childInjector);
       const componentRef = this.bodyPortalOutlet!.attachComponentPortal(componentPortal);
+      this.componentInstance = componentRef.instance;
       Object.assign(componentRef.instance, this.nzContentParams);
       componentRef.changeDetectorRef.detectChanges();
     }

components/drawer/drawer.service.ts

@@ -5,7 +5,7 @@
 
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
-import { ComponentRef, Injectable } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -14,56 +14,56 @@ import { NzDrawerRef } from './drawer-ref';
 import { NzDrawerComponent } from './drawer.component';
 import { NzDrawerServiceModule } from './drawer.service.module';
 
-export class DrawerBuilderForService<R> {
-  private drawerRef: ComponentRef<NzDrawerComponent> | null;
+export class DrawerBuilderForService<T, R> {
+  private drawerRef: NzDrawerComponent<T, R> | null;
   private overlayRef: OverlayRef;
   private unsubscribe$ = new Subject<void>();
 
   constructor(private overlay: Overlay, private options: NzDrawerOptions) {
     /** pick {@link NzDrawerOptions.nzOnCancel} and omit this option */
     const { nzOnCancel, ...componentOption } = this.options;
     this.overlayRef = this.overlay.create();
-    this.drawerRef = this.overlayRef.attach(new ComponentPortal(NzDrawerComponent));
+    this.drawerRef = this.overlayRef.attach(new ComponentPortal(NzDrawerComponent)).instance;
     this.updateOptions(componentOption);
     // Prevent repeatedly open drawer when tap focus element.
-    this.drawerRef!.instance.savePreviouslyFocusedElement();
-    this.drawerRef!.instance.nzOnViewInit.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
-      this.drawerRef!.instance.open();
+    this.drawerRef.savePreviouslyFocusedElement();
+    this.drawerRef.nzOnViewInit.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+      this.drawerRef!.open();
     });
-    this.drawerRef!.instance.nzOnClose.subscribe(() => {
+    this.drawerRef.nzOnClose.subscribe(() => {
       if (nzOnCancel) {
         nzOnCancel().then(canClose => {
           if (canClose !== false) {
-            this.drawerRef!.instance.close();
+            this.drawerRef!.close();
           }
         });
       } else {
-        this.drawerRef!.instance.close();
+        this.drawerRef!.close();
       }
     });
 
-    this.drawerRef!.instance.afterClose.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+    this.drawerRef.afterClose.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
       this.overlayRef.dispose();
       this.drawerRef = null;
       this.unsubscribe$.next();
       this.unsubscribe$.complete();
     });
   }
 
-  getInstance(): NzDrawerRef<R> {
-    return this.drawerRef! && this.drawerRef!.instance;
+  getInstance(): NzDrawerRef<T, R> {
+    return this.drawerRef!;
   }
 
   updateOptions(options: NzDrawerOptionsOfComponent): void {
-    Object.assign(this.drawerRef!.instance, options);
+    Object.assign(this.drawerRef!, options);
   }
 }
 
 @Injectable({ providedIn: NzDrawerServiceModule })
 export class NzDrawerService {
   constructor(private overlay: Overlay) {}
 
-  create<T = NzSafeAny, D = undefined, R = NzSafeAny>(options: NzDrawerOptions<T, D extends undefined ? {} : D>): NzDrawerRef<R> {
-    return new DrawerBuilderForService<R>(this.overlay, options).getInstance();
+  create<T = NzSafeAny, D = undefined, R = NzSafeAny>(options: NzDrawerOptions<T, D extends undefined ? {} : D>): NzDrawerRef<T, R> {
+    return new DrawerBuilderForService<T, R>(this.overlay, options).getInstance();
   }
 }

components/drawer/drawer.spec.ts

@@ -419,6 +419,7 @@ describe('NzDrawerService', () => {
     component.openTemplate();
     fixture.detectChanges();
     tick(300);
+    expect(component.templateDrawerRef?.getContentComponent()).toBeNull();
     expect(component.templateOpenSpy).toHaveBeenCalled();
     fixture.detectChanges();
     (overlayContainerElement.querySelector('.ant-drawer .ant-drawer-mask') as HTMLElement).click();
@@ -439,13 +440,15 @@ describe('NzDrawerService', () => {
     drawerRef.afterClose.subscribe(closeSpy);
     fixture.detectChanges();
     expect(openSpy).not.toHaveBeenCalled();
+    expect(drawerRef.getContentComponent()).not.toBeNull();
     tick(300);
     expect(openSpy).toHaveBeenCalled();
     (overlayContainerElement.querySelector('.ant-drawer .close-btn') as HTMLElement).click();
     fixture.detectChanges();
     tick(300);
     expect(closeSpy).toHaveBeenCalled();
     fixture.detectChanges();
+    expect(drawerRef.getContentComponent()).toBeNull();
   }));
 
   it('should `nzOnCancel` work', fakeAsync(() => {