refactor(abc:reuse-tab): refactor reuse tab (#863)

- add refresh
ng-alain · May 1, 2020 · ea588b2 · ea588b2
1 parent a2e5114
commit ea588b2
Show file tree

Hide file tree

Showing 22 changed files with 312 additions and 263 deletions.
diff --git a/packages/abc/reuse-tab/index.en-US.md b/packages/abc/reuse-tab/index.en-US.md
@@ -17,17 +17,17 @@ The default `ReuseTabModule` does not register `RouteReuseStrategy`. If you need
 
 **Register**
 
-> How to use in ng-alain, pls refer to [global-config.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/global-config.module.ts#L22).
+> How to use in ng-alain, pls refer to [global-config.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/global-config.module.ts#L32).
 
 ```ts
 // global-config.module.ts
-providers: [
-  {
-    provide: RouteReuseStrategy,
-    useClass: ReuseTabStrategy,
-    deps: [ReuseTabService],
-  }
-]
+import { RouteReuseStrategy } from '@angular/router';
+import { ReuseTabService, ReuseTabStrategy } from '@delon/abc/reuse-tab';
+alainProvides.push({
+  provide: RouteReuseStrategy,
+  useClass: ReuseTabStrategy,
+  deps: [ReuseTabService],
+} as any);
 ```
 
 **Add Component**
@@ -36,11 +36,13 @@ providers: [
 
 ```html
 <section class="alain-default__content">
-  <reuse-tab></reuse-tab>
-  <router-outlet></router-outlet>
+  <reuse-tab #reuseTab></reuse-tab>
+  <router-outlet (activate)="reuseTab.activate($event)"></router-outlet>
 </section>
 ```
 
+> **Note: If you do not specify the `(activate)` event, you cannot refresh current tab when uncached.**
+
 ## Matching Mode
 
 Inject the `ReuseTabService` class anywhere in the project (recommended: `startup.service.ts`) and set the `mode` property, or pass `<reuse-tab [mode]="0"></reuse-tab> ` Reset values.
@@ -194,7 +196,6 @@ Turning on `keepingScroll` will restore the previous scrollbar position after re
 | `[keepingScrollContainer]` | Keep the scroll bar container | `string | Element` | `window` |
 | `[excludes]` | Exclusion rules, limited by `mode=URL` | `RegExp[]` | - |
 | `[allowClose]` | Whether to allow close tab | `boolean` | `true` |
-| `[showCurrent]` | Always show current page | `boolean` | `true` |
 | `[customContextMenu]` | Custom context click menu | `ReuseCustomContextMenu[]` | - |
 | `[tabBarExtraContent]` | Extra content in tab bar | `TemplateRef<void>` | - |
 | `[tabBarStyle]` | Tab bar style object | `object` | - |
@@ -279,4 +280,4 @@ Limiting the maximum number of reuse can reduce memory growth. There are several
 
 ### Not supported QueryString parameters
 
-Route reuse preserves uses URLs to distinguish whether the same page, and QueryString query parameters will be repeatedly misused, so not supported, and the QueryString part is forced to be ignored.
+Route reuse preserves uses URLs to distinguish whether the same page, and QueryString query parameters will be repeatedly misused, so not supported, and the QueryString part is forced to be ignored.
diff --git a/packages/abc/reuse-tab/index.zh-CN.md b/packages/abc/reuse-tab/index.zh-CN.md
@@ -17,17 +17,17 @@ module: ReuseTabModule
 
 **注册RouteReuseStrategy**
 
-> ng-alain 使用方式参考：[global-config.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/global-config.module.ts#L22)。
+> ng-alain 使用方式参考：[global-config.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/global-config.module.ts#L32)。
 
 ```ts
 // global-config.module.ts
-providers: [
-  {
-    provide: RouteReuseStrategy,
-    useClass: ReuseTabStrategy,
-    deps: [ReuseTabService],
-  }
-]
+import { RouteReuseStrategy } from '@angular/router';
+import { ReuseTabService, ReuseTabStrategy } from '@delon/abc/reuse-tab';
+alainProvides.push({
+  provide: RouteReuseStrategy,
+  useClass: ReuseTabStrategy,
+  deps: [ReuseTabService],
+} as any);
 ```
 
 **添加组件**
@@ -36,11 +36,13 @@ providers: [
 
 ```html
 <section class="alain-default__content">
-  <reuse-tab></reuse-tab>
-  <router-outlet></router-outlet>
+  <reuse-tab #reuseTab></reuse-tab>
+  <router-outlet (activate)="reuseTab.activate($event)"></router-outlet>
 </section>
 ```
 
+> **注意：若不指定 `(activate)` 事件，无法刷新未缓存过的当前标签页。**
+
 ## 匹配模式
 
 在项目的任何位置（建议：`startup.service.ts`）注入 `ReuseTabService` 类，并设置 `mode` 属性，或通过 `<reuse-tab [mode]="0"></reuse-tab>` 重新设置值，包括：
@@ -194,7 +196,6 @@ export class DemoComponent {
 | `[keepingScrollContainer]` | 保持滚动条容器 | `string | Element` | `window` |
 | `[excludes]` | 排除规则，限 `mode=URL` | `RegExp[]` | - |
 | `[allowClose]` | 允许关闭 | `boolean` | `true` |
-| `[showCurrent]` | 总是显示当前页 | `boolean` | `true` |
 | `[customContextMenu]` | 自定义右键菜单 | `ReuseCustomContextMenu[]` | - |
 | `[tabBarExtraContent]` | tab bar 上额外的元素 | `TemplateRef<void>` | - |
 | `[tabBarStyle]` | tab bar 的样式对象 | `object` | - |

diff --git a/packages/abc/reuse-tab/reuse-tab-context-menu.component.html b/packages/abc/reuse-tab/reuse-tab-context-menu.component.html
@@ -1,4 +1,8 @@
 <ul nz-menu>
+  <li nz-menu-item
+      (click)="click($event, 'refresh')"
+      data-type="refresh"
+      [innerHTML]="i18n.refresh"></li>
   <li nz-menu-item
       (click)="click($event, 'close')"
       data-type="close"
@@ -13,10 +17,6 @@
       data-type="closeRight"
       [nzDisabled]="item.last"
       [innerHTML]="i18n.closeRight"></li>
-  <li nz-menu-item
-      (click)="click($event, 'clear')"
-      data-type="clear"
-      [innerHTML]="i18n.clear"></li>
   <ng-container *ngIf="customContextMenu!.length > 0">
     <li nz-menu-divider></li>
     <li *ngFor="let i of customContextMenu"

diff --git a/packages/abc/reuse-tab/reuse-tab.component.html b/packages/abc/reuse-tab/reuse-tab.component.html
@@ -1,11 +1,9 @@
-<nz-tabset [nzSelectedIndex]="pos"
-  [nzAnimated]="false" [nzType]="tabType"
-  [nzTabBarExtraContent]="tabBarExtraContent"
-  [nzTabBarGutter]="tabBarGutter"
-  [nzTabBarStyle]="tabBarStyle">
-  <nz-tab *ngFor="let i of list; let index = index" [nzTitle]="titleTemplate" (nzClick)="to(index)">
+<nz-tabset [nzSelectedIndex]="pos" [nzAnimated]="false" [nzType]="tabType"
+  [nzTabBarExtraContent]="tabBarExtraContent" [nzTabBarGutter]="tabBarGutter" [nzTabBarStyle]="tabBarStyle">
+  <nz-tab *ngFor="let i of list; let index = index" [nzTitle]="titleTemplate" (nzClick)="_to(index)">
     <ng-template #titleTemplate>
-      <div [reuse-tab-context-menu]="i" [customContextMenu]="customContextMenu" class="reuse-tab__name" [attr.title]="i.title">
+      <div [reuse-tab-context-menu]="i" [customContextMenu]="customContextMenu" class="reuse-tab__name"
+        [attr.title]="i.title">
         <span [class.reuse-tab__name-width]="tabMaxWidth" [style.max-width.px]="tabMaxWidth">
           {{i.title}}
         </span>
@@ -14,4 +12,4 @@
     </ng-template>
   </nz-tab>
 </nz-tabset>
-<reuse-tab-context [i18n]="i18n" (change)="cmChange($event)"></reuse-tab-context>
+<reuse-tab-context [i18n]="i18n" (change)="contextMenuChange($event)"></reuse-tab-context>