feat(abc:reuse-tab): add replace method, close #99

ng-alain · Jun 15, 2018 · 1c0be3e · 1c0be3e
1 parent 34a0336
commit 1c0be3e
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 6 deletions.
diff --git a/packages/abc/reuse-tab/index.md b/packages/abc/reuse-tab/index.md
@@ -161,6 +161,7 @@ export class DemoComponent {
 `move(url, position)` | 移动缓存数据，同时触 `change` move事件 | `void`
 `clear()` | 清除所有缓存，同时触 `change` clear事件 | `void`
 `refresh()` | 无任何动作，但会触 `change` refresh事件 | `void`
+`replace(url)` | 强制关闭当前路由（包含不可关闭状态），并重新导航至 `newUrl` 路由 | `void`
 
 ### reuse-tab 组件
 

diff --git a/packages/abc/reuse-tab/reuse-tab.service.spec.ts b/packages/abc/reuse-tab/reuse-tab.service.spec.ts
@@ -1,6 +1,6 @@
 import { Injector } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-import { ActivatedRouteSnapshot, ActivatedRoute, RouteReuseStrategy } from '@angular/router';
+import { ActivatedRouteSnapshot, ActivatedRoute, RouteReuseStrategy, Router, RouterModule } from '@angular/router';
 import { filter } from 'rxjs/operators';
 
 import { MenuService } from '@delon/theme';
@@ -17,11 +17,15 @@ class MockMenuService {
     return url === '/a/0' ? [] : [{ text: TITLE, reuse, reuseClosable }];
   }
 }
+class MockRouter {
+  navigateByUrl = jasmine.createSpy()
+}
 
 describe('abc: reuse-tab', () => {
   let injector: Injector;
   let srv: ReuseTabService;
   let menuSrv: MenuService;
+  let router: Router;
 
   afterEach(() => srv.ngOnDestroy());
 
@@ -37,10 +41,12 @@ describe('abc: reuse-tab', () => {
           deps: [ReuseTabService],
         },
         { provide: ActivatedRoute, useValue: { snapshot: { url: [] } } },
+        { provide: Router, useFactory: () => new MockRouter() }
       ].concat(providers),
     });
     srv = injector.get(ReuseTabService);
     menuSrv = injector.get(MenuService, null);
+    router = injector.get(Router);
     reuse = true;
     reuseClosable = true;
   }
@@ -338,6 +344,20 @@ describe('abc: reuse-tab', () => {
         );
       srv.refresh(true);
     });
+    describe('#replace', () => {
+      it('should be navigate to new url', () => {
+        expect(router.navigateByUrl).not.toHaveBeenCalled();
+        srv.replace('/a/1');
+        expect(router.navigateByUrl).toHaveBeenCalled();
+      });
+      it('should be closed current router after navigate to new url', () => {
+        genCached(1, '/');
+        expect(router.navigateByUrl).not.toHaveBeenCalled();
+        srv.replace('/b');
+        expect(srv.count).toBe(1);
+        expect(router.navigateByUrl).toHaveBeenCalled();
+      });
+    });
   });
 
   describe('##boundary##', () => {

diff --git a/packages/abc/reuse-tab/reuse-tab.service.ts b/packages/abc/reuse-tab/reuse-tab.service.ts
@@ -1,5 +1,5 @@
 import { Injectable, OnDestroy, Optional, Injector } from '@angular/core';
-import { ActivatedRouteSnapshot, ActivatedRoute } from '@angular/router';
+import { ActivatedRouteSnapshot, ActivatedRoute, Router } from '@angular/router';
 import { Observable, BehaviorSubject } from 'rxjs';
 import { MenuService } from '@delon/theme';
 import {
@@ -30,6 +30,11 @@ export class ReuseTabService implements OnDestroy {
 
   // region: public
 
+  /** 当前路由地址 */
+  get curUrl() {
+    return this.getUrl(this.injector.get(ActivatedRoute).snapshot);
+  }
+
   /** 允许最多复用多少个页面，取值范围 `2-100` */
   set max(value: number) {
     this._max = Math.min(Math.max(value, 2), 100);
@@ -73,9 +78,9 @@ export class ReuseTabService implements OnDestroy {
   }
   /** 自定义当前标题 */
   set title(value: string | ReuseTitle) {
-    const curUrl = this.getUrl(this.injector.get(ActivatedRoute).snapshot);
+    const url = this.curUrl;
     if (typeof value === 'string') value = { text: value };
-    this._titleCached[curUrl] = value;
+    this._titleCached[url] = value;
     this.di('update current tag title: ', value);
     this._cachedChange.next({
       active: 'title',
@@ -192,6 +197,14 @@ export class ReuseTabService implements OnDestroy {
       list: this._cached,
     });
   }
+  /**
+   * 强制关闭当前路由（包含不可关闭状态），并重新导航至 `newUrl` 路由
+   */
+  replace(newUrl: string) {
+    const url = this.curUrl;
+    if (this.exists(url)) this.close(url, true);
+    this.injector.get(Router).navigateByUrl(newUrl);
+  }
   /**
    * 获取标题，顺序如下：
    *
@@ -220,8 +233,8 @@ export class ReuseTabService implements OnDestroy {
   }
   /** 自定义当前 `closable` 状态 */
   set closable(value: boolean) {
-    const curUrl = this.getUrl(this.injector.get(ActivatedRoute).snapshot);
-    this._closableCached[curUrl] = value;
+    const url = this.curUrl;
+    this._closableCached[url] = value;
     this.di('update current tag closable: ', value);
     this._cachedChange.next({
       active: 'closable',