为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 路由复用策略与方法

路由复用策略与方法

2022.11.16 15:48 98浏览

背景

默认情况下,路由从 A 组件跳转到 B 组件的时候,A 组件的状态也会一并销毁。
但有时候,从 A 组件跳转到 B 组件,再从B 组件切换回 A 组件,我们希望看到A 组件依旧保持原来的状态,表单里面的内容依然存在。
此时,我们就需要 Angular 的路由复用策略,即 RouteReuseStrategy

RouteReuseStrategy 提供的方法

  • shouldDetach:判断是否复用此路由
  • store:储存需要复用的路由
  • shouldAttach:判断是否启用路由缓存
  • retrieve:获取已经储存的路由
  • shouldReuseRoute:判断是否应该复用路由

使用方法和步骤

首先,创建一个服务文件: route-cache.service.ts

内容如下:

import { Injectable } from '@angular/core';
import { RouteReuseStrategy, DefaultUrlSerializer, ActivatedRouteSnapshot, DetachedRouteHandle } from "@angular/router";

interface IRouteConfigData {
  reuse: boolean;
}

interface ICachedRoute {
  handle: DetachedRouteHandle;
  data: IRouteConfigData;
}

@Injectable()
export class RouteCacheService implements RouteReuseStrategy {

  private routeCache = new Map<string, ICachedRoute>();

  shouldReuseRoute(
    future: ActivatedRouteSnapshot,
    curr: ActivatedRouteSnapshot
  ): boolean {
    let ret = future.routeConfig === curr.routeConfig;
    console.log("shouldReuseRoute called", ret);
    if (ret) {
      this.addRedirectsRecursively(future); // update redirects
    }
    return ret;
  }

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    const data = this.getRouteData(route);
    console.log(
      "shouldDetach check if we want to detach and store route",
      data && data.reuse
    );
    return data && data.reuse;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    const url = this.getFullRouteUrl(route);
    const data = this.getRouteData(route);
    this.routeCache.set(url, { handle, data });
    this.addRedirectsRecursively(route);
    //console.log("store route", this.routeCache);
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    const url = this.getFullRouteUrl(route);
    console.log(
      "shouldAttach if retrive route is true",
      this.routeCache.has(url)
    );
    return this.routeCache.has(url);
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | any {
    const url = this.getFullRouteUrl(route);
    const data = this.getRouteData(route);
    console.log(
      "retrive route",
      data && data.reuse && this.routeCache.has(url)
    );
    return data && data.reuse && this.routeCache.has(url)
      ? this.routeCache.get(url)?.handle
      : null;
  }

  private addRedirectsRecursively(route: ActivatedRouteSnapshot): void {
    const config = route.routeConfig;
    if (config) {
      if (!config.loadChildren) {
        const routeFirstChild = route.firstChild;
        const routeFirstChildUrl = routeFirstChild
          ? this.getRouteUrlPaths(routeFirstChild).join("/")
          : "";
        const childConfigs = config.children;
        if (childConfigs) {
          const childConfigWithRedirect = childConfigs.find(
            c => c.path === "" && !!c.redirectTo
          );
          if (childConfigWithRedirect) {
            childConfigWithRedirect.redirectTo = routeFirstChildUrl;
          }
        }
      }
      route.children.forEach(childRoute =>
        this.addRedirectsRecursively(childRoute)
      );
    }
  }

  private getFullRouteUrl(route: ActivatedRouteSnapshot): string {
    return this.getFullRouteUrlPaths(route)
      .filter(Boolean)
      .join("/");
  }

  private getFullRouteUrlPaths(route: ActivatedRouteSnapshot): string[] {
    const paths = this.getRouteUrlPaths(route);
    return route.parent
      ? [...this.getFullRouteUrlPaths(route.parent), ...paths]
      : paths;
  }

  private getRouteUrlPaths(route: ActivatedRouteSnapshot): string[] {
    return route.url.map(urlSegment => urlSegment.path);
  }

  private getRouteData(route: ActivatedRouteSnapshot): IRouteConfigData | any {
    return route.routeConfig && (route.routeConfig.data as IRouteConfigData);
  }

}

然后,在根模块里(app.module.ts)引入并注入此服务:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule, Components } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';

import { MaterialModule } from '@common/material/material.module';
import { ApiService } from '@common/service/api/api.service';
import { SnackBarService } from '@common/material/snack-bar/snack-bar.service';

// 引入默认的路由复用接口类 RouteReuseStrategy 和我们自定义的服务 
import { RouteReuseStrategy } from "@angular/router";
import { RouteCacheService } from '@common/service/route/route-cache.service';

@NgModule({
  declarations: [
    AppComponent, 
    ...Components
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MaterialModule,
  ],
  providers: [ApiService, SnackBarService, 
    
             // 注入 RouteCacheService 服务
             { provide: RouteReuseStrategy, useClass: RouteCacheService }],
  bootstrap: [AppComponent]
})
export class AppModule { }

最后,哪个路由需要复用(根路由和子路由都如此配置),就添加 data: { reuse: true } 即可:

const routes: Routes = [
  { 
    path: '', 
    // 
    data: { reuse: true }, 
    component: InPaymentComponent 
  },
  {
    path: 'update',
    loadChildren: () => import('./modules/update/update.module').then((m) => m.UpdateModule),
  },
  {
    path: 'check',
    loadChildren: () => import('./modules/check/check.module').then((m) => m.CheckModule),
  }
];

注意:RouteReuseStrategy路由复用的方法,不适用于惰性模块加载。

点击查看更多内容

本文首次发布于慕课网 ,转载请注明出处,谢谢合作

0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
JS工程师
手记
粉丝
1.4万
获赞与收藏
860

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消