Angular路由复用实例
关于在tabset中动态加载Component ，点击查看我之前的文章
介绍了如何使用动态加载Component 的方式实现tabset 标签页，从而达到页面切换。
这种方式缺点就是无法使用Angular 的路由来跳转，多个页面如果如果某个元素的id 值相同会有影响。
以下的方式主要使用了Angular 的路由复用功能—>RouteReuseStrategy
主要借鉴了 ng-alian里面的delon
https://github.com/ng-alain/delon
Angular在官网上显示是一个实验性的功能
解释
具体来说就是重写上述的5个方法
主要代码
route-reuse-strategy.ts
export class CustomeRouteReuseStrategy implements RouteReuseStrategy {
constructor(private reuseTabService: ReuseTabService) { }
/** 表示对所有路由允许复用 如果你有路由不想利用可以在这加一些业务逻辑判断 */
public shouldDetach(route: ActivatedRouteSnapshot): boolean {
return this.reuseTabService.shouldDetach(route);
}
/** 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象 */
public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
return this.reuseTabService.store(route, handle);
}
/** 若 path 在缓存中有的都认为允许还原路由 */
public shouldAttach(route: ActivatedRouteSnapshot): boolean {
return this.reuseTabService.shouldAttach(route);
}
/** 从缓存中获取快照，若无则返回null */
public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
return this.reuseTabService.retrieve(route);
}
/** 进入路由触发，判断是否同一路由 */
public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
return this.reuseTabService.shouldReuseRoute(future,curr);
}
}
reuse-tab-service.ts
import { Injectable, OnDestroy, Injector } from '@angular/core';
import { ActivatedRouteSnapshot, ActivatedRoute } from '@angular/router';
import { ReuseTabCached, ReuseTabNotify } from '../models/reuse-tab';
import { BehaviorSubject, Observable } from 'rxjs';
import { filter } from 'rxjs/operators';
@Injectable()
export class ReuseTabService implements OnDestroy {
private _cachedChange: BehaviorSubject<ReuseTabNotify> = new BehaviorSubject<ReuseTabNotify>(null);
/**缓存路由列表 */
private _reuseTabCachedList: ReuseTabCached[] = [];
private _titleCached: { [url: string]: string } = {};
private removeUrlBuffer: string;
/** 当前路由地址 */
get curUrl() {
return this.getUrl(this.injector.get(ActivatedRoute).snapshot);
}
/** 获取已缓存的路由 */
get reuseTabList(): ReuseTabCached[] {
return this._reuseTabCachedList;
}
/** 获取当前缓存的路由总数 */
get count() {
return this._reuseTabCachedList.length;
}
/** 订阅缓存变更通知 */
get change(): Observable<ReuseTabNotify> {
return this._cachedChange.asObservable()
.pipe(filter(w => w !== null));
}
constructor(private injector: Injector) { }
/**
* 关闭tab
* @param url 路由url
* @param includeNonCloseable 是否包含强制不可关闭
*/
close(url: string, includeNonCloseable = false): any {
this.removeUrlBuffer = url;
this.remove(url, includeNonCloseable);
this._cachedChange.next({ active: 'close', url, list: this._reuseTabCachedList });
this.di('close tag', url);
return true;
}
/**
* 决定是否允许路由复用，若 `true` 会触发 `store`
*/
shouldDetach(route: ActivatedRouteSnapshot): boolean {
if (this.hasInValidRoute(route)) return false;
this.di('#shouldDetach', this.can(route), this.getUrl(route));
return this.can(route);
}
/**
* 存储快照
*/
store(_snapshot: ActivatedRouteSnapshot, _handle: any) {
// if (this.count >= this._max) this._reuseTabCachedList.shift();
const url = this.getUrl(_snapshot);
const index = this.index(url);
const title = this.getTitle(url, _snapshot);
const item: ReuseTabCached = {
title: title,
closable: true,
url: url,
_snapshot: _snapshot,
_handle: _handle,
};
if (index === -1) {
this._reuseTabCachedList.push(item);
} else {
this._reuseTabCachedList[index] = item;
}
this.removeUrlBuffer = null;
this.di('#store', index === -1 ? '[new]' : '[override]', url);
// if (_handle && _handle.componentRef) {
// this.runHook('_onReuseDestroy', url, _handle.componentRef);
// }
this._cachedChange.next({ active: 'add', item, list: this._reuseTabCachedList });
}
/**
* 决定是否允许应用缓存数据
*/
shouldAttach(route: ActivatedRouteSnapshot): boolean {
if (this.hasInValidRoute(route)) return false;
const url = this.getUrl(route);
const data = this.getReuseTabCached(url);
const ret = !!(data && data._handle);
this.di('#shouldAttach', ret, url);
// if (ret && data._handle.componentRef) {
// this.runHook('_onReuseInit', url, data._handle.componentRef);
// }
return ret;
}
/**
* 提取复用数据
*/
retrieve(route: ActivatedRouteSnapshot): {} {
let hasInValidRoute = this.hasInValidRoute(route);
if (hasInValidRoute) return null;
const url = this.getUrl(route);
const data = this.getReuseTabCached(url);
const ret = (data && data._handle) || null;
this.di('#retrieve', url, ret);
return ret;
}
/**
* 决定是否应该进行复用路由处理
*/
shouldReuseRoute(
future: ActivatedRouteSnapshot,
curr: ActivatedRouteSnapshot,
): boolean {
let ret = future.routeConfig === curr.routeConfig;
if (!ret) return false;
const path = ((future.routeConfig && future.routeConfig.path) ||
'') as string;
if (path.length > 0 && ~path.indexOf(':')) {
const futureUrl = this.getUrl(future);
const currUrl = this.getUrl(curr);
ret = futureUrl === currUrl;
}
this.di('=====================');
this.di('#shouldReuseRoute', ret, `${this.getUrl(curr)}=>${this.getUrl(future)}`, future, curr);
return ret;
}
/** 获取指定路径缓存所在位置，`-1` 表示无缓存 */
index(url: string): number {
return this._reuseTabCachedList.findIndex(w => w.url === url);
}
/** 获取指定路径缓存是否存在 */
exists(url: string): boolean {
return this.index(url) !== -1;
}
/** 获取指定路径缓存 */
getReuseTabCached(url: string): ReuseTabCached {
return url ? this._reuseTabCachedList.find(w => w.url === url) || null : null;
}
/**
* 获取标题
* @param url 指定URL
* @param route 指定路由快照
*/
getTitle(url: string, route?: ActivatedRouteSnapshot): string {
if (this._titleCached[url]) return this._titleCached[url];
if (route && route.data && route.data.title)
return route.data.title;
}
/**
* 清除标题缓存
*/
clearTitleCached() {
this._titleCached = {};
}
getTruthRoute(route: ActivatedRouteSnapshot) {
let next = route;
while (next.firstChild) next = next.firstChild;
return next;
}
/**
* 根据快照获取URL地址
*/
getUrl(route: ActivatedRouteSnapshot): string {
let next = this.getTruthRoute(route);
const segments = [];
while (next) {
segments.push(next.url.join('/'));
next = next.parent;
}
const url =
'/' +
segments
.filter(i => i)
.reverse()
.join('/');
return url;
}
/**
* 运行生命周期钩子
* @param method
* @param url
* @param comp
*/
private runHook(method: string, url: string, comp: any) {
if (comp.instance && typeof comp.instance[method] === 'function')
comp.instance[method]();
}
/**
* 组件销毁
* @param _handle
*/
private destroy(_handle: any) {
if (_handle && _handle.componentRef && _handle.componentRef.destroy)
_handle.componentRef.destroy();
}
/**
* 移除url
* @param url
* @param includeNonCloseable
*/
private remove(url: string | number, includeNonCloseable: boolean): boolean {
const idx = typeof url === 'string' ? this.index(url) : url;
const item = idx !== -1 ? this._reuseTabCachedList[idx] : null;
if (!item || (!includeNonCloseable && !item.closable)) return false;
this.destroy(item._handle);
this._reuseTabCachedList.splice(idx, 1);
delete this._titleCached[url];
return true;
}
/**
* 去掉loadChildren，以及children
* 得到纯路由
* @param route
*/
private hasInValidRoute(route: ActivatedRouteSnapshot) {
return (
!route.routeConfig ||
route.routeConfig.loadChildren ||
route.routeConfig.children
);
}
/**
* 检查快照是否允许被复用
*/
private can(route: ActivatedRouteSnapshot): boolean {
const url = this.getUrl(route);
if (url === this.removeUrlBuffer) return false;
if (route.data && typeof route.data.reuse === 'boolean')
return route.data.reuse;
return true;
}
private di(...args) {
// tslint:disable-next-line:no-console
console.warn(...args);
}
ngOnDestroy(): void {
this._reuseTabCachedList = [];
this._cachedChange.unsubscribe();
}
}
app.module.ts
....
providers: [
ReuseTabService,
{
provide: RouteReuseStrategy,
useClass: CustomeRouteReuseStrategy,
deps: [ReuseTabService]
}
]
.....