在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:reuse-tab开源软件地址:https://gitee.com/ccteams/reuse-tab开源软件介绍:
复用标签在中台系统非常常见,本质是解决不同路由页切换时组件数据不丢失问题。 最新打开的永远是当前页,而路由复用是指当我们离开当前页时若符合复用条件(即:匹配模式)则保存当前路由所有组件状态(包括子组件),待下一次进入相同路由(即:匹配模式)时再从中缓存中获取到。 如何使用?npm install --save reuse-tab 默认 // delon.module.ts or app.module.tsproviders: [ { provide: RouteReuseStrategy, useClass: ReuseTabStrategy, deps: [ReuseTabService], }, ReuseTabService] 匹配模式在项目的任何位置(建议: 0、(推荐,默认值) 可复用: { text:'Dashboard' }{ text:'Dashboard', reuse: true } 不可复用: { text:'Dashboard', reuse: false } 1、(推荐) 可复用: { text:'Dashboard', reuse: true } 不可复用: { text:'Dashboard' }{ text:'Dashboard', reuse: false } 2、URL 对所有路由有效,可以配合
标签文本根据以下顺序获取标签文本:
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}`; }); }} 生命周期路由复用过程中不会触发现有任何生命周期钩子(例如: _onReuseInit() 当目前路由在复用过程中时触发。 _onReuseDestroy() 当目前路由允许复用且进入新路由时触发。 以 @Component()export class DemoComponent { _onReuseInit() { console.log('_onReuseInit'); } _onReuseDestroy() { console.log('_onReuseDestroy'); }} 常见问题如何Debug?路由复用会保留组件状态,这可能会带来另一个弊端;复用过程中组件的生命周期勾子不会重复触发,大部分情况下都能正常运行,但可能需要注意:
APIReuseTabService 接口属性
方法
reuse-tab 组件
此项目参考自: ng-alain |
请发表评论