Angular路由复用策略RouteReuseStrategy
第一步
新建RouteReuseStrategy
新建一个CustomReuseStrategy.ts
实现接口 RouteReuseStrategy
import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';
export class CustomReuseStrategy implements RouteReuseStrategy {
public static handlers: { [key: string]: DetachedRouteHandle } = {};
/** 删除缓存路由快照的方法 */
public static deleteRouteSnapshot(path: string): void {
const name = path.replace(/\//g, '_');
if (CustomReuseStrategy.handlers[name]) {
delete CustomReuseStrategy.handlers[name];
}
}
/** 表示对所有路由允许复用 如果你有路由不想利用可以在这加一些业务逻辑判断 */
shouldDetach(route: ActivatedRouteSnapshot): boolean {
// console.debug('shouldDetach======>', route);
return route.data.relad || false;
// return true;
}
/** 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象 */
store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
// console.debug('store======>', route, handle);
CustomReuseStrategy.handlers[this.getRouteUrl(route)] = handle;
}
/** 若 path 在缓存中有的都认为允许还原路由 */
shouldAttach(route: ActivatedRouteSnapshot): boolean {
// console.debug('shouldAttach======>', route);
return !!CustomReuseStrategy.handlers[this.getRouteUrl(route)];
}
/** 从缓存中获取快照,若无则返回nul */
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
// console.debug('retrieve======>', route);
if (!CustomReuseStrategy.handlers[this.getRouteUrl(route)]) {
return null;
}
return CustomReuseStrategy.handlers[this.getRouteUrl(route)];
}
/** 进入路由触发,判断是否同一路由 */
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
// console.debug('shouldReuseRoute======>', future, curr);
return future.routeConfig === curr.routeConfig &&
JSON.stringify(future.params) === JSON.stringify(curr.params);
}
/** 使用route的path作为快照的key */
getRouteUrl(route: ActivatedRouteSnapshot) {
const path = route['_routerState'].url.replace(/\//g, '_');
return path;
}
}
第二步:
在app.module.ts
进行注册
import { NgModule } from '@angular/core';
import { RouteReuseStrategy } from '@angular/router';
import { AppComponent } from './app.component';
import { CustomReuseStrategy } from './CustomReuseStrategy';
@NgModule({
declarations: [
AppComponent
],
imports: [
// your imports
],
providers: [
{ provide: RouteReuseStrategy, useClass: CustomReuseStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule { }
第三步:
const routes: Routes = [ ..., { path: 'class-list', component: ClassListPage, data: { reload: true } } ];
删除路由快照
import { Component, OnInit } from '@angular/core';
import { CustomReuseStrategy } from '../r';
@Component({
selector: 'tabpage',
templateUrl: './tabpage.component.html',
styleUrls: ['./tabpage.component.css'],
providers: [CustomReuseStrategy]
})
export class TodoComponent implements OnInit{
constructor() {}
ngOnInit(): void {}
changeTab() {
// 删除快照
this.deleteRouteSnapshot();
// tab切换代码,路由跳转代码
// ...
}
/** 路由加载前可手动删除路由快照,切换路由则不会使用快照 */
deleteRouteSnapshot() {
CustomReuseStrategy.deleteRouteSnapshot('/todolazy');
}
}
参考文章
https://segmentfault.com/a/1190000015391814?utm_source=tag-newest