title: reuse-tab subtitle: 路由复用标签 cols: 1 module: AdReuseTabModule

复用标签在中台系统非常常见，本质是解决不同路由页切换时组件数据不丢失问题。

最新打开的永远是当前页，而路由复用是指当我们离开当前页时若符合复用条件（即：匹配模式）则保存当前路由所有组件状态（包括子组件），待下一次进入相同路由（即：匹配模式）时再从中缓存中获取到。

如何使用？

npm install --save reuse-tab

默认 AdReuseTabModule 并不会注册 RouteReuseStrategy，除了引入模块以外，还需要在手动注册 RouteReuseStrategy。

// delon.module.ts or app.module.ts
providers: [
  {
    provide: RouteReuseStrategy,
    useClass: ReuseTabStrategy,
    deps: [ReuseTabService],
  },
  ReuseTabService
]

匹配模式

在项目的任何位置（建议：startup.service.ts）注入 ReuseTabService 类，并设置 mode 属性，或通过 <reuse-tab [mode]="0"></reuse-tab> 重新设置值，包括：

0、（推荐，默认值）

可复用：

{ text:'Dashboard' }
{ text:'Dashboard', reuse: true }

不可复用：

{ text:'Dashboard', reuse: false }

1、（推荐）

可复用：

{ text:'Dashboard', reuse: true }

不可复用：

{ text:'Dashboard' }
{ text:'Dashboard', reuse: false }

2、URL

对所有路由有效，可以配合 excludes 过滤无须复用路由。

除以上规则以外，路由配置中 data 属性若设置 reuse 值时优先级高于上述规则。

标签文本

根据以下顺序获取标签文本：

1. 组件内使用 ReuseTabService.title = 'new title' 重新指定文本，
2. 路由配置中 data 属性中包含 reuseTitle > title
3. 菜单数据中 text 属性

ReuseTabService 代码示例：

export class DemoReuseTabEditComponent implements OnInit {
  id: any;

  constructor(private route: ActivatedRoute, private reuseTabService: ReuseTabService) {}

  ngOnInit(): void {
    this.route.params.subscribe(params => {
      this.id = params.id;
      this.reuseTabService.title = `编辑 ${this.id}`;
    });
  }
}

生命周期

路由复用过程中不会触发现有任何生命周期钩子（例如：ngOnInit 等），但是往往需要在复用过程中刷新数据，因此 reuse-tab 提供了两种新生命周期钩子用于临时解决这类问题。

_onReuseInit()

当目前路由在复用过程中时触发。

_onReuseDestroy()

当目前路由允许复用且进入新路由时触发。

以 _ 开头希望未来 Angular 会有相应的钩子用于快速替换，一个简单的示例：

@Component()
export class DemoComponent {
  _onReuseInit() {
    console.log('_onReuseInit');
  }
  _onReuseDestroy() {
    console.log('_onReuseDestroy');
  }
}

常见问题

如何Debug？

路由复用会保留组件状态，这可能会带来另一个弊端；复用过程中组件的生命周期勾子不会重复触发，大部分情况下都能正常运行，但可能需要注意：

• OnDestroy 可能会处理一些组件外部（例如：body）的样式等，可以参考生命周期解决。
• 开启 debug 模式后会在 console 很多信息这有助于分析路由复用的过程。

API

ReuseTabService 接口

属性

参数 | 说明 | 类型 | 默认值 ----|------|-----|------ [max] | 允许最多复用多少个页面 | number | 10 [mode] | 设置匹配模式 | ReuseTabMatchMode | 0 [debug] | 是否Debug模式 | boolean | false [excludes] | 排除规则，限 mode=URL | RegExp[] | - [items] | 获取已缓存的路由 | ReuseTabCached[] | - [count] | 获取当前缓存的路由总数 | number | - [change] | 订阅缓存变更通知 | Observable<ReuseTabNotify> | - [title] | 自定义当前标题 | string | - [closable] | 自定义当前 closable 状态 | boolean | -

方法

方法名 | 说明 | 返回类型 ----|------|----- index(url) | 获取指定路径缓存所在位置，-1 表示无缓存 | number exists(url) | 获取指定路径缓存是否存在 | boolean get(url) | 获取指定路径缓存 | boolean getTitle(url, route?: ActivatedRouteSnapshot) | 获取标题 | string clearTitleCached() | 清空自定义标题数据 | void getClosable(url, route?: ActivatedRouteSnapshot) | 获取 closable 状态 | string clearClosableCached() | 清空 closable 缓存 | void remove(url) | 根据URL移除标签，同时触 change remove事件 | void move(url, position) | 移动缓存数据，同时触 change move事件 | void clear() | 清除所有缓存，同时触 change clear事件 | void refresh() | 无任何动作，但会触 change refresh事件 | void replace(url) | 强制关闭当前路由（包含不可关闭状态），并重新导航至 newUrl 路由 | void

reuse-tab 组件

参数 | 说明 | 类型 | 默认值 ----|------|-----|------ [mode] | 设置匹配模式 | ReuseTabMatchMode | 0 [debug] | 是否Debug模式 | boolean | false [max] | 允许最多复用多少个页面 | number | 10 [excludes] | 排除规则，限 mode=URL | RegExp[] | - [allowClose] | 允许关闭 | boolean | true [showCurrent] | 总是显示当前页 | boolean | true [fixed] | 是否固定 | boolean | true (close) | 关闭回调 | EventEmitter | - (change) | 切换时回调，接收的参数至少包含：active、list 两个参数 | EventEmitter | -

此项目参考自: ng-alain