Angular2+routeReuseStrategy 生命周期挂钩

当涉及构建 Angular 应用时，合理利用路由策略是优化性能的关键。Angular 提供了 `routeReuseStrategy`，它允许我们管理路由的重用行为，减少不必要的组件销毁和创建，从而提升用户体验并优化应用性能。在 Angular 2+ 中，`routeReuseStrategy` 可以通过生命周期挂钩进行定制，使开发者能够控制路由的行为。

typescript
import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';
export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  private storedRoutes: { [key: string]: DetachedRouteHandle } = {};
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    // 在这里根据条件决定是否分离路由
    return route.data.reuse;
  }
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    // 存储分离的路由
    this.storedRoutes[route.routeConfig?.path as string] = handle;
  }
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    // 在这里根据条件决定是否重新连接路由
    return !!route.routeConfig && !!this.storedRoutes[route.routeConfig.path as string];
  }
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    // 检索存储的路由
    if (!route.routeConfig) return null;
    return this.storedRoutes[route.routeConfig.path as string];
  }
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    // 在这里决定是否重用路由
    return future.routeConfig === curr.routeConfig;
  }
}

typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, RouteReuseStrategy } from '@angular/router';
import { AppComponent } from './app.component';
import { CustomRouteReuseStrategy } from './custom-route-reuse-strategy'; // 导入自定义策略
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      // 定义你的路由配置
    ])
  ],
  providers: [
    {
      provide: RouteReuseStrategy,
      useClass: CustomRouteReuseStrategy // 使用自定义的路由重用策略
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }