此文基于官方文档教程，是对其代码细节的解释文档。
reuse-tab组件位于【delon/abc】包中，这意味着多标签式选项卡组件是ng-alain内置的组件之一。 请注意，此组件不支持全部关闭，必须保留一个选项卡。
实现reuse-tab组件的基石
reuse-tab组件的原理是基于NG的RouteReuseStrategy服务在页面上输出一排按钮。
RouteReuseStrategy是angular的路由复用策略，用于可复用路由的判定与存取的操作。前提是你要清楚ng-alain项目的路由框架是“一个页面（URL）对应一个组件对应一个标签/选项卡”的事实，所以RouteReuseStrategy实际上缓存的就是组件对象。【对于一个页面内有两个以上的路由插槽的例外情况暂(bing)且(bu)不(zhi)表(chi)】。
关于路由复用策略的情况我不再赘述，请移步此处。
代码执行概览
RouteReuseStrategy内有一个数组存储着所有被缓存的路由快照，通过点击reuse-tab在页面上生成的分别与这些快照对应的按钮，导航到相应的URL地址，这时候路由就不会生成新的组件对象而是使用缓存在RouteReuseStrategy服务内的路由快照。而当第一次访问某个URL（路由）时，会生成路由快照，此时reuse-tab会自动生成一个按钮（选项卡）。
路由判定可缓存
通过MenuService可以设置菜单列表，Menu对象的reuse属性指示当前路由可否被缓存。如果为true，则该菜单对应的URL（路由）必然会被复用。
这时候我们就会遇到一个问题，那就是并不是所有路由在左侧菜单栏都有对应的菜单项。此时没有Menu对象供我们设置它的reuse属性来指定路由可否被复用，难道真得向MenuService插入一个隐藏的菜单？ 当然拒绝用这么low的方法，博主不甘心的仔细查阅reuse-tab组件，发现一个名为mode的枚举属性，我们可以通过指定此属性的值来决定reuse-tab的复用方式。
当值为ReuseTabMatchMode.Menu时，除非标记Menu对象的属性reuse为false否则都判定为可被复用。
当值为ReuseTabMatchMode.MenuFore时，除非标记Menu对象的属性reuse为true否则都判定不可被复用。
当值为ReuseTabMatchMode.URL时，任何URL（路由）都将判定为可被复用（可以通过excludes属性来指定不需要被复用的URL）。这并不妨碍你设置menu.reuse为false，因为Menu.reuse相当于css的行内样式，优先级很高。
是故我们设置reuse-tab组件的mode属性即可根据自身项目需求自定义reuse-tab的行为。友情提示 excludes与menu.reuse的设定请务必不要重复or互斥，如果出现不该被复用的路由被复用那可能就是这儿的问题。
mode的默认值
image
image
所以如上图所示，ng-alin项目中默认情况下除了/500设置reuse为false，其他都会缓存。因为mode的默认值就是Menu。
image
办法（二）
image
通常情况下，当模式为Menu时，我会朝不存在于MenuService的路由对象的date属性里添加一个类型为Boolean的属性，它指示是否复用此路由。
路由复用时存储
image
【@delon/abc】中实现RouteReuseStrategy接口并用来缓存路由快照的类型是ReuseTabCached。
image
ReuseTabService.store方法是用来缓存路由的快照。请注意，路由复用策略同时把路由的title缓存了，将在下文指出。
多标签式选项卡的标题
首先我们应该区分多标签式选项卡的标题与路由快照缓存的标题，但前者来自于后者。
image
ReuseItem是多标签式选项卡的元素类型，顾名思义title属性直接作用于选项卡标题。
请允许我再次申明：reuse-tab组件遍历了【ReuseItem数组】从而生成的按钮们与路由快照一一对应，而【ReuseItem数组】是基于【路由快照缓存数组】生成的，所以说有多少个被缓存的路由快照就有多少个标签式选项卡。
image
在路由快照存储时title就已经被感知到了，上图则是细节部分。
在显示多标签式选项卡标题时，优先使用通过ReuseTabService.title设置并存储在ReuseTabService._titleCached数组内的标题，然后使用路由的data对象的title，否则使用菜单的text属性，最后直接显示URL。
根据此方法最后两行代码，如果设置mode的值为ReuseTabMatchModel.URL时，请务必满足前两个条件之一，否则只会显示URL。
到此你会发现我们谈的一直都是路由快照缓存标题，但为什么又牵扯到多标签式选项卡标题呢？那是因为reuse-tab的数据源（ReuseItem[]）基于路由快照缓存（ReuseTabCached）。
image
如上图所示，reuse-tab遍历了路由快照缓存生成ReuseItem，titile的值也来自于ResueTabCached.titile。
因为理解不了reuse-tab组件源代码的初衷，所以我理的越来越乱。并且组件并没有我预期中的那么精致，我勉强能总结一下标题显示URL的问题。
- 当你的路由并不在左侧菜单中时，你要么设置ReuseTabService.title = '标题'，要么设置路由的 data: { title : ‘标题’}。
- 当你设置mode为ReuseTabMatchMode.URL时。你要么设置ReuseTabService.title = '标题'，要么设置路由的 data: { title : ‘标题’}，Menu对象的text和i18n不会起作用，它只会显示URL。
- 不要纠结于ReuseTabService.mode和ReuseTabComponent.mode这两个的关系，请统一使用前者。
- 当你确定全部路由都不需要复用时，请从layout/default.component.html中移除reuse-tab标签。
reuse-tab选项卡切换
目前有个隐患就是，路由复用策略虽然能缓存缓存URL（路由）内的组件对象（一直存在），那么组件生命周期【OnDestroy】永远不会被触发，同时当被缓存的路由被激活后（切换选项卡）【OnInit】更不会触发。
image
是故reuse-tab组件内部有新的生命周期，用来支持路由快照被激活和被缓存这两个操作能被感知到。但如图所示组件仍需要实现OnInit，因为第一次并不会触发【_onReuseInit】。
ng-alain1.0.x之后必须由用户主动注册路由复用策略，具体请查阅ng-alain的更新日志或示例代码。
image
同时reuse-tab组件支持在选项卡被切换后、关闭后发起通知。除非点击reuse-tab组件在DOM上生成的按钮，不然仅点击左侧菜单是不会触发change事件的。
启用reuse-tab后的路由传参
在任意的单页面web应用程序中，涉及到【路由】的项目都必须严格按照框架推荐的方式进行传参。
而在ng-alain中，当reuse-tab被启用后（即便在启用之前），URL都不应该继续使用带有【?】的传参方式，无论【?】是在【#】之前还是之后。此规则是强制性要求，不遵守即必然出现错误，表现为参数会在页面切换或刷新后丢失。
当路由只需要一个参数时的正确做法：
Router: { path: 'edit/:id', component: EditNewComponent, data: { reuse: true } }
...
Class {
id: number;
inputType: boolean;
ngOnInit(): void {
this.id = parseInt(this.route.snapshot.params.id); this.inputType = !this.id || this.id <= 0;
}
}
当路由只需要一个参数时，如上方的示例代码所示。使用【/:***】的方式传递参数。
当路由不需要或需要多个参数时的正确做法：
// 路由申明如下：
{ path: 'add', component: AddComponent, data: { reuse: true } }
...
@Component({
selector: 'app-user-list',
template: `
<a [routerLink]="['/add', {id:1,cd:2}]">跳转方式一</a>
`
})
export class UserListComponent implements OnInit {
constructor(private route: ActivatedRoute,
private router: Router) { }
ngOnInit(): void {
console.log('取餐方法一', this.route.snapshot.params);
this.route.params.subscribe(params => console.log('取餐方法二', params));
}
/** 跳转方式二 */
btnClick() {
this.router.navigateByUrl('/user/add;id=1;cd=2');
}
}
此时无需在路由中定义参数，只需页面内使用任意一种方式皆可获取到传入的参数。第一种示例代码强制要求必须传入id，而此种方式指示所有可能的参数都是可选的。术语叫做【矩阵参数（matrix parameters）】。
最后的问题
并不是每个路由在事先都能知道标题，也不是每个路由的标题在事后都一成不变。如何才能根据业务需求动态的改变多标签式选项卡的标题？似乎是只能将从服务器动态获取的菜单设为隐藏后添加到MenuService里，但这样做的限制是不能使用ReuseTabService.title和路由的data: { title : ‘标题’} 方式来设置标题。那么，该用何种方式才能写出不会损耗性能的优雅代码呢？
其余内容，待续……
网友评论