第一步
新建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