Angular 中路由缓存机制的特点及使用方法-JavaScript中文网-JavaScript教程资源分享门户

背景

随着 Angular 应用规模的增大，路由导致应用的加载时间也变得更长。路由模块是 Angular 中最重要的模块之一，针对路由模块的缓存需要进一步考虑，以优化 Angular 的性能和用户体验。

路由缓存的特点

Angular 中的路由缓存机制可以根据激活的路由组件提前加载其组件和相关的资源，同时也可以在以后恢复该路由组件的状态。因此，Angular 的路由缓存可以帮助减少加载时间和服务器请求，提高应用的性能和响应速度。

另外，路由缓存还可以：

保持视图状态，即当重新访问缓存的路由时，会保留该视图的状态和数据；
支持多级缓存，即实现多个路由之间的缓存互不干扰，并且可以让缓存在运行时动态添加或删除。

路由缓存的使用方法

Angular 中路由缓存的使用需要借助于路由器模块的 RouteReuseStrategy 接口和 DetachRouteReuseStrategy 类，这些 API 可以通过自定义路由策略来实现路由缓存功能。

实现路由缓存策略

首先，我们需要在 Angular 应用的根模块中定义一个缓存策略类，例如：

// javascriptcn.com 代码示例
import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';

export class CustomReuseStrategy implements RouteReuseStrategy {
  private handlers: {[key: string]: DetachedRouteHandle} = {};

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return true;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    this.handlers[route.routeConfig.path] = handle;
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return !!route.routeConfig && !!this.handlers[route.routeConfig.path];
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    if (!route.routeConfig || !this.handlers[route.routeConfig.path]) {
      return null;
    }
    return this.handlers[route.routeConfig.path];
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }
}

这个缓存策略的实现包括以下几个方法：

shouldDetach - 当路由离开时，可以保存组件和其数据用于路由重用。
store - 保存之前离开的路由的组件和其数据。
shouldAttach - 当路由重新进入时，可以提供之前的组件和数据以供重用。
retrieve - 从之前保存的数据中检索路由的复用对象。
shouldReuseRoute - 进一步判断路由是否应该被复用。

在模块中添加路由缓存策略

接下来，我们需要在 Angular 应用的模块中设置路由器的缓存策略。例如，在 app.module.ts 中：

// javascriptcn.com 代码示例
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { CustomReuseStrategy } from './custom-reuse-strategy';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    { provide: RouteReuseStrategy, useClass: CustomReuseStrategy }
  ]
})
export class AppModule { }

我们在 providers 中设置了 CustomReuseStrategy 作为路由器的缓存策略。现在我们已经成功地实现了路由缓存。

配置缓存路由

我们也可以在路由模块中为特定的路由配置路由缓存。例如，在下面的路由模块中，我们为 NewsListComponent 添加了 data 属性来指定该路由需要被缓存：

// javascriptcn.com 代码示例
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NewsListComponent } from './news-list.component';
import { NewsDetailComponent } from './news-detail.component';

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: '/news' },
  { path: 'news', component: NewsListComponent, data: { reuse: true } },
  { path: 'news/:id', component: NewsDetailComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这里我们通过 data: { reuse: true } 来指定该路由应该被缓存。

最后，我们需要在 NewsListComponent 中加入如下代码来实现路由缓存：

// javascriptcn.com 代码示例
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { filter } from 'rxjs/operators';
import { RouterStateSnapshot } from '@angular/router';
import { RouteReuseStrategy } from '@angular/router';

@Component({
  templateUrl: './news-list.component.html'
})
export class NewsListComponent implements OnInit {

  constructor(
    private route: ActivatedRoute,
    private routerStateSnapshot: RouterStateSnapshot,
    private reuseStrategy: RouteReuseStrategy
  ) { }

  ngOnInit() {
    this.route.data.pipe(filter(data => data.reuse)).subscribe(() => {
      const cachedRoute = this.reuseStrategy.retrieve(this.routerStateSnapshot.url);
      if (cachedRoute) {
        this.reuseStrategy.shouldAttach(this.routerStateSnapshot.routeConfig, cachedRoute);
      }
    });
  }
}

在 ngOnInit 方法中，我们使用 RouteReuseStrategy 中的 retrieve 方法从缓存中检索路由并使用 shouldAttach 方法重新附加路由。这样，只要我们再次导航到该路由，就可以从缓存中返回并再次使用它。

总结

路由缓存是 Angular 应用性能优化的重要手段之一。通过自定义路由策略，我们可以轻松实现路由组件的缓存和复用，从而缩短加载时间和服务器请求，同时提高应用的性能和用户体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653668ca7d4982a6ebe78adf