feat(theme:drawer): add closeAll, openDrawers method

packages/theme/src/services/drawer/drawer.helper.ts

@@ -1,4 +1,4 @@
-import { Injectable, TemplateRef, Type } from '@angular/core';
+import { Injectable, Optional, SkipSelf, TemplateRef, Type } from '@angular/core';
 import { Observable, Observer } from 'rxjs';
 
 import { deepMerge } from '@delon/util/other';
@@ -50,7 +50,15 @@ export interface DrawerHelperOptions {
  */
 @Injectable({ providedIn: 'root' })
 export class DrawerHelper {
-  constructor(private srv: NzDrawerService) {}
+  private openDrawersAtThisLevel: NzDrawerRef[] = [];
+  get openDrawers(): NzDrawerRef[] {
+    return this.parentDrawer ? this.parentDrawer.openDrawers : this.openDrawersAtThisLevel;
+  }
+
+  constructor(
+    private srv: NzDrawerService,
+    @Optional() @SkipSelf() private parentDrawer: DrawerHelper
+  ) {}
 
   /**
    * 构建一个抽屉
@@ -103,8 +111,9 @@ export class DrawerHelper {
         };
       }
 
-      const subject = this.srv.create({ ...defaultOptions, ...drawerOptions });
-      const afterClose$ = subject.afterClose.subscribe((res: NzSafeAny) => {
+      const ref = this.srv.create({ ...defaultOptions, ...drawerOptions });
+      this.openDrawers.push(ref);
+      const afterClose$ = ref.afterClose.subscribe((res: NzSafeAny) => {
         if (options!.exact === true) {
           if (res != null) {
             observer.next(res);
@@ -114,10 +123,24 @@ export class DrawerHelper {
         }
         observer.complete();
         afterClose$.unsubscribe();
+        this.close(ref);
       });
     });
   }
 
+  private close(ref: NzDrawerRef): void {
+    const idx = this.openDrawers.indexOf(ref);
+    if (idx === -1) return;
+    this.openDrawers.splice(idx, 1);
+  }
+
+  closeAll(): void {
+    let i = this.openDrawers.length;
+    while (i--) {
+      this.openDrawers[i].close();
+    }
+  }
+
   /**
    * 构建一个抽屉，点击蒙层不允许关闭
    */

packages/theme/src/services/drawer/drawer.spec.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { Component, NgModule } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { NzDrawerModule, NzDrawerRef } from 'ng-zorro-antd/drawer';
@@ -29,7 +29,7 @@ describe('theme: DrawerHelper', () => {
     if (a) a.remove();
   });
 
-  it('should be subscribing return value', (done: () => void) => {
+  it('should be subscribing return value', done => {
     drawer
       .create('', TestDrawerComponent, {
         ret: 'true'
@@ -41,7 +41,7 @@ describe('theme: DrawerHelper', () => {
     fixture.detectChanges();
   });
 
-  it('should be only close', (done: () => void) => {
+  it('should be only close', done => {
     drawer
       .create('', TestDrawerComponent, {
         ret: 'destroy'
@@ -60,7 +60,18 @@ describe('theme: DrawerHelper', () => {
     fixture.detectChanges();
   });
 
-  it('#static', (done: () => void) => {
+  it('should be closeAll', fakeAsync(() => {
+    expect(drawer.openDrawers.length).toBe(0);
+    drawer.create('', TestComponent).subscribe();
+    drawer.create('', TestComponent).subscribe();
+    expect(drawer.openDrawers.length).toBe(2);
+    drawer.closeAll();
+    tick(1000);
+    fixture.detectChanges();
+    expect(drawer.openDrawers.length).toBe(0);
+  }));
+
+  it('#static', done => {
     drawer
       .static('', TestDrawerComponent, {
         ret: 'true'
@@ -286,7 +297,7 @@ class TestDrawerComponent {
       } else {
         this.modal.close(this.ret);
       }
-    }, 20);
+    });
   }
 }
 

packages/theme/src/services/drawer/index.en-US.md

@@ -22,6 +22,9 @@ this.NzDrawerRef.close(true);
 // Close
 this.NzDrawerRef.close();
 this.NzDrawerRef.close(false);
+
+// Close all open drawers
+this.DrawerHelper.closeAll();
 ```
 
 There are includes `create` & `static` methods to open the normal & static drawer.
@@ -52,3 +55,8 @@ If you don't bottom toolbar, you need specify `footer: false`.
 | `footerHeight` | Toolbar height | `number` | `55` |
 | `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` |
 | `drawerOptions` | Drawer raw parameters [NzDrawerOptions](https://ng.ant.design/components/drawer/en#nzdraweroptions) 参数 | `NzDrawerOptions` | - |
+
+
+### Method
+
+- `closeAll` Close all open drawers

packages/theme/src/services/drawer/index.zh-CN.md

@@ -21,6 +21,9 @@ this.NzDrawerRef.close(true);
 // 关闭
 this.NzDrawerRef.close();
 this.NzDrawerRef.close(false);
+
+// 关闭所有已打开的抽屉
+this.DrawerHelper.closeAll();
 ```
 
 包括 `create` & `static` 分别用于打开普通或静态抽屉。
@@ -51,3 +54,7 @@ this.NzDrawerRef.close(false);
 | `footerHeight` | 工具条高度 | `number` | `55` |
 | `exact` | 是否精准（默认：`true`），若返回值非空值（`null`或`undefined`）视为成功，否则视为错误 | `boolean` | `true` |
 | `drawerOptions` | 抽屉 [NzDrawerOptions](https://ng.ant.design/components/drawer/zh#nzdraweroptions) 参数 | `NzDrawerOptions` | - |
+
+### Method
+
+- `closeAll` 关闭所有已打开的抽屉

src/app/app.component.ts

@@ -2,7 +2,7 @@ import { BreakpointObserver } from '@angular/cdk/layout';
 import { Component, ElementRef, HostBinding, Inject, Renderer2 } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 
-import { ALAIN_I18N_TOKEN, TitleService, VERSION as VERSION_ALAIN } from '@delon/theme';
+import { ALAIN_I18N_TOKEN, DrawerHelper, TitleService, VERSION as VERSION_ALAIN } from '@delon/theme';
 import { VERSION as VERSION_ZORRO } from 'ng-zorro-antd/version';
 
 import { I18NService, MetaService, MobileService } from '@core';
@@ -26,7 +26,8 @@ export class AppComponent {
     title: TitleService,
     router: Router,
     mobileSrv: MobileService,
-    breakpointObserver: BreakpointObserver
+    breakpointObserver: BreakpointObserver,
+    dh: DrawerHelper
   ) {
     renderer.setAttribute(el.nativeElement, 'ng-alain-version', VERSION_ALAIN.full);
     renderer.setAttribute(el.nativeElement, 'ng-zorro-version', VERSION_ZORRO.full);
@@ -39,6 +40,8 @@ export class AppComponent {
     router.events.subscribe(evt => {
       if (!(evt instanceof NavigationEnd)) return;
 
+      dh.closeAll();
+
       const url = evt.url.split('#')[0].split('?')[0];
       if (url.includes('/dev') || url.includes('/404') || this.prevUrl === url) return;
 

src/app/shared/components/dialog/drawer.component.ts

@@ -6,7 +6,7 @@ import { NzDrawerRef } from 'ng-zorro-antd/drawer';
 @Component({
   selector: `app-demo-dialog-drawer`,
   template: `
-    <p style="height: 1000px">参数：{{ record | json }}</p>
+    <p style="height: 1000px">参数：{{ record | json }},<a routerLink="/">Change Router</a></p>
     The end!
     <div class="drawer-footer">
       <button nz-button [nzType]="'default'" (click)="cancel()"> Cancel </button>