Angular路由复用策略RouteReuseStrategy

黄路丹 發表於 2020-9-24 11:36:00

第一步
新建RouteReuseStrategy
新建一个<code>CustomReuseStrategy.ts</code> 实现接口 RouteReuseStrategy
<pre class="typescript hljs"><code class="typescript">import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';

export class CustomReuseStrategy implements RouteReuseStrategy {

public static handlers: { : DetachedRouteHandle } = {};

/** 删除缓存路由快照的方法 */
public static deleteRouteSnapshot(path: string): void {
 const name = path.replace(/\//g, '_');
 if (CustomReuseStrategy.handlers) {
 delete CustomReuseStrategy.handlers;
 }
}

/** 表示对所有路由允许复用如果你有路由不想利用可以在这加一些业务逻辑判断 */
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;
}

}</code> 第二步: 在<code>app.module.ts</code>进行注册</pre>
<pre class="typescript hljs"><code class="typescript">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:
})
export class AppModule { }</code> 第三步： const routes: Routes = [ ..., { path: 'class-list', component: ClassListPage, data: { reload: true } } ];</pre>
<h3 id="item-2-2">删除路由快照</h3>
<pre class="typescript hljs"><code class="typescript">import { Component, OnInit } from '@angular/core';
import { CustomReuseStrategy } from '../r';

@Component({
selector: 'tabpage',
templateUrl: './tabpage.component.html',
styleUrls: ['./tabpage.component.css'],
providers:
})
export class TodoComponent implements OnInit{
constructor() {}

ngOnInit(): void {}

changeTab() {
// 删除快照
this.deleteRouteSnapshot();
// tab切换代码，路由跳转代码
// ...
}

/** 路由加载前可手动删除路由快照，切换路由则不会使用快照 */
deleteRouteSnapshot() {
CustomReuseStrategy.deleteRouteSnapshot('/todolazy');
}
}</code></pre>
<pre class="typescript hljs"> </pre>
<h2 id="item-5">参考文章</h2>
https://segmentfault.com/a/1190000015391814?utm_source=tag-newest
https://blog.csdn.net/lglspace/article/details/102983029 
来源：https://www.cnblogs.com/yinyueyu/p/13723325.html

頁: [1]

琼殿技术论坛's Archiver

Angular路由复用策略RouteReuseStrategy