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

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

如何使用

默认 ReuseTabModule 并不会注册 RouteReuseStrategy，这是因为若默认在模块内注册会导致所有引入 @delon/abc 模块都会强制使用路由复用（不管是否模板是否包括 <reuse-tab>）。因此：

注册RouteReuseStrategy

ng-alain 使用方式参考：global-config.module.ts。

// global-config.module.ts
import { RouteReuseStrategy } from '@angular/router';
import { ReuseTabService, ReuseTabStrategy } from '@delon/abc/reuse-tab';
alainProvides.push({
  provide: RouteReuseStrategy,
  useClass: ReuseTabStrategy,
  deps: [ReuseTabService],
} as any);

添加组件

位置 src/app/layout/basic/basic.component.ts

<reuse-tab #reuseTab></reuse-tab>
<router-outlet (activate)="reuseTab.activate($event)"></router-outlet>

注意：若不指定 (activate) 事件，无法刷新未缓存过的当前标签页。

位置 src/app/layout/layout.module.ts

import { ReuseTabModule } from '@delon/abc/reuse-tab'; // 新增 import

@NgModule({ imports: // ... ReuseTabModule, // 导入模块 , // ... }) export class LayoutModule {}

## 匹配模式

在项目的任何位置（建议：`startup.service.ts`）注入 `ReuseTabService` 类，并设置 `mode` 属性，或通过 `` 重新设置值，包括：

**0、Menu（推荐，默认值）**

按菜单 ([Menu](/theme/menu#Menu)) 配置。

可复用：

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

不可复用：

{ text:'Dashboard', reuse: false }

**1、MenuForce**

按菜单 ([Menu](/theme/menu#Menu)) 强制配置。

可复用：

{ text:'Dashboard', reuse: true }

不可复用：

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

**2、URL**

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

## 标签文本

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

1. 使用 `ReuseTabService.title = 'new title'` 在组件内覆盖文本
2. 路由配置中 `data` 属性中包含 `reuseTitle` > `title`
3. 菜单数据中 `text` 属性

`ReuseTabService` 代码示例：

```ts
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}`;
    });
  }
}

生命周期

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

OnReuseInit 接口

• _onReuseInit(type?: ReuseHookOnReuseInitType): void;

当目前路由在复用过程中时触发，type 值分别为：

• init 当路由复用时

• refresh 当触发刷新动作时

OnReuseDestroy 接口

• _onReuseDestroy(): void;

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

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

import { OnReuseDestroy, OnReuseInit, ReuseHookOnReuseInitType } from '@delon/abc/reuse-tab';

@Component()
export class DemoComponent implements OnReuseInit, OnReuseDestroy {
  _onReuseInit(type: ReuseHookOnReuseInitType) {
    console.log('_onReuseInit', type);
  }
  _onReuseDestroy() {
    console.log('_onReuseDestroy');
  }
}

滚动条位置

开启 keepingScroll 会在复用后恢复之前的滚动条位置，有几项注意细节：

务必使用路由选项 scrollPositionRestoration 来管理滚动条位置

• true：表示保持之前滚动条位置

• false：表示不对滚动条任何操作

• 若全站使用路由复用时，则设置 scrollPositionRestoration: 'disabled'，避免延迟滚动

• 若部分页面路由复用时，则受限于 scrollPositionRestoration 优先值 ，会有 1ms 延迟恢复滚动条位置