同步操作将从 Sail/reuse-tab 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
title | subtitle | cols | module |
---|---|---|---|
reuse-tab |
路由复用标签 |
1 |
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
值时优先级高于上述规则。
根据以下顺序获取标签文本:
ReuseTabService.title = 'new title'
重新指定文本,data
属性中包含 reuseTitle
> title
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');
}
}
路由复用会保留组件状态,这可能会带来另一个弊端;复用过程中组件的生命周期勾子不会重复触发,大部分情况下都能正常运行,但可能需要注意:
OnDestroy
可能会处理一些组件外部(例如:body
)的样式等,可以参考生命周期解决。debug
模式后会在 console
很多信息这有助于分析路由复用的过程。属性
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
[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 |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
[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
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。