Angular 路由重用策略 - RouteReuseStrategy

Lorie要好好学习天天向上

已于 2022-06-30 16:40:13 修改

阅读量456

点赞数

分类专栏： js angular 文章标签： angular.js typescript javascript

于 2022-06-30 16:32:44 首次发布

本文链接：https://blog.csdn.net/sinat_35820101/article/details/125542706

版权

本文深入探讨Angular的RouteReuseStrategy，揭示如何实现路由的高效重用，提升应用性能。通过理解并定制路由重用策略，开发者可以更好地控制组件的生命周期，优化用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Angular 路由重用策略 - RouteReuseStrategy

import {
    RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';

interface ICachedRoute {
   
  handle: DetachedRouteHandle;
}
/* istanbul ignore file */
export class CacheRouteReuseStrategy implements RouteReuseStrategy {
   
  private routeCache = new Map<string, ICachedRoute>();
  routesToReuse = false;
  routeToReuseConfig = [
    '/dashboard/YOUR_ROUTE_1',
    '/dashboard/YOUR_ROUTE_2',
  ];

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

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
   
    /* if config is UI_Constants is false means reuse route will work */
    let shouldDetachFlag = false;

最低0.47元/天解锁文章