路由复用标签

IMPORT MODULE

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

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

如何使用

1. 在 app.config.ts 下提供 provideReuseTabConfig() 配置

2. 在需要展示标签的地方调用 <reuse-tab>，一般在 src/app/layout/basic/basic.component.ts，例如：

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

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

匹配模式

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

0、Menu（推荐，默认值）

按菜单 (Menu) 配置。

可复用：

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

不可复用：

{ text:'Dashboard', reuse: false }

1、MenuForce

按菜单 (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 代码示例：

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 延迟恢复滚动条位置