Angular 5.0 學習8：Angular路由複用策略 (切換頁面內容不丟失，保持原來狀態)

1、引言

路由在執行過程當中對組件無狀態操做，即路由離退時組件狀態也一併被刪除；固然在絕大多數場景下這是合理的。進入組件時會執行 ngOnInit() 裏面的初始化方法，使頁面保持最開始的狀態。但有些需求須要切換頁面的時候，再切換回來該頁面時保持原來的狀態。此時咱們就須要 Angular 的RouteReuseStrategy 貫穿路由狀態並決定構建組件的方式。

2、RouteReuseStrategy

RouteReuseStrategy ：路由複用策略，提供了幾種辦法通俗易懂的方法：

shouldDetach 是否容許複用路由
store 當路由離開時會觸發，存儲路由
shouldAttach 是否容許還原路由
retrieve 獲取存儲路由
shouldReuseRoute 進入路由觸發，是否同一路由時複用路由

3、使用步驟

1.新建 simple-reuse-strategy.ts，網上已經有大佬寫好了，我稍微修改了一下， 路由複用策略默認對全部路由複用 可經過給路由配置項增長data: { keep: true }來進行選擇性使用。

// simple-reuse-strategy.ts
// tslint:disable
import {RouteReuseStrategy, DefaultUrlSerializer, ActivatedRouteSnapshot, DetachedRouteHandle} from '@angular/router';

export class SimpleReuseStrategy implements RouteReuseStrategy {

  _cacheRouters: { [key: string]: any } = {};

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    // 默認對全部路由複用 可經過給路由配置項增長data: { keep: true }來進行選擇性使用
   // {path: 'search', component: SearchComponent, data: {keep: true}},
    if (!route.data.keep) {
      return false;
    } else {
      return true;
    }
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    // 按path做爲key存儲路由快照&組件當前實例對象
    // path等同RouterModule.forRoot中的配置
    this._cacheRouters[route.routeConfig.path] = {
      snapshot: route,
      handle: handle
    };
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    // 在緩存中有的都認爲容許還原路由
    return !!route.routeConfig && !!this._cacheRouters[route.routeConfig.path];
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    // 從緩存中獲取快照，若無則返回null
    if (!route.routeConfig || route.routeConfig.loadChildren || !this._cacheRouters[route.routeConfig.path]) return null;
    return this._cacheRouters[route.routeConfig.path].handle;

  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    // 同一路由時複用路由
    return future.routeConfig === curr.routeConfig;
  }


}

2.將策略註冊到模塊當中：

import {RouteReuseStrategy, RouterModule, Routes} from '@angular/router';
import {SimpleReuseStrategy} from './simple-reuse-strategy';
providers: [
  /*路由複用策略*/
  { provide: RouteReuseStrategy, useClass: SimpleReuseStrategy }
]

3.使用路由複用策略後，ngOnInit 的方法不會再執行，這個時候須要把 ngOnInit的方法寫在NavigationEnd裏

// 任意一個頁面組件
import {NavigationEnd, Router} from '@angular/router';
constructor(private router: Router) {
    this.router.events
      .filter((event) => event instanceof NavigationEnd)
      .subscribe((event: NavigationEnd) => {
      // 這裏須要判斷一下當前路由，若是不加的話，每次路由結束的時候都會執行這裏的方法，這裏以search組件爲例
        if (event.url === '/search') {
          /*在這寫須要執行初始化的方法*/
          this.search();
        }
      });
  }

4.額外問題
退出系統後，換另一個用戶登陸，組件狀態也會保留，這是不合理的。

shouldAttach(route: ActivatedRouteSnapshot): boolean {
    // 在路由是login的時候清空緩存
    if(route.routeConfig['path'] === 'login'){
      this._cacheRouters = {};
    }
    // 在緩存中有的都認爲容許還原路由
    return !!route.routeConfig && !!this._cacheRouters[route.routeConfig.path];
  }