复用标签在中台系统非常常见,本质是解决不同路由页切换时组件数据不丢失问题。
最新打开的永远是当前页,而路由复用是指当我们离开当前页时若符合复用条件(即:匹配模式)则保存当前路由所有组件状态(包括子组件),待下一次进入相同路由(即:匹配模式)时再从中缓存中获取到。
如何使用
默认 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 接口
当目前路由在复用过程中时触发,type
值分别为:
init
当路由复用时
refresh
当触发刷新动作时
OnReuseDestroy 接口
当目前路由允许复用且进入新路由时触发。
以 _
开头希望未来 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 来管理滚动条位置