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

https://blog.csdn.net/lglspace/article/details/102983029

来源：https://www.cnblogs.com/yinyueyu/p/13723325.html