Angular的RouteReuseStrategy与LazyLoadedModule搭配使用时,在路由到另一个模块后,MainLayout没有消失且[routerLinks]不起作用
创始人
2024-10-24 09:31:04
0次

要解决这个问题,需要在应用程序中实现自定义的RouteReuseStrategy。使用自定义的RouteReuseStrategy可让我们决定在路由时是否应重复使用组件实例。我们可以使用RouteReuseStrategy接口中的shouldDetach,store,shouldAttach和retrieve方法将路由元数据存储在内存中,并在下次访问该路由时重新使用它们。

以下是解决此问题的代码示例:

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

export class CustomRouteReuseStrategy extends RouteReuseStrategy {

  private handlers: {[key: string]: DetachedRouteHandle} = {};

  shouldDetach(route: import("@angular/router").ActivatedRouteSnapshot): boolean {
    return !!route.data.reuse;
  }

  store(route: import("@angular/router").ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    this.handlers[route.url.join('/')] = handle;
  }

  shouldAttach(route: import("@angular/router").ActivatedRouteSnapshot): boolean {
    return !!this.handlers[route.url.join('/')];
  }

  retrieve(route: import("@angular/router").ActivatedRouteSnapshot): DetachedRouteHandle {
    if (!route.routeConfig || route.routeConfig.loadChildren || !this.handlers[route.url.join('/')]) {
      return null;
    }
    return this.handlers[route.url.join('/')];
  }

  shouldReuseRoute(future: import("@angular/router").ActivatedRouteSnapshot, curr: import("@angular/router").ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }
}

在应用程序的模块中,只需将CustomRouteReuseStrategy添加到providers数组中即可:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, RouteReuseStrategy } from '@angular/router';
import { CustomRouteReuseStrategy } from './custom-route-reuse-strategy';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  providers: [
    {

相关内容

热门资讯

连日来辅助挂!九旺大厅ai智能... 连日来辅助挂!九旺大厅ai智能辅助挂工具,九旺大厅哪里有挂烘培(真是有挂方针)1、首先打开九旺大厅辅...
现场直击辅助挂!番茄ai智能辅... 现场直击辅助挂!番茄ai智能辅助挂工具,番茄软件下载窍要(一直果真有挂)1、现场直击辅助挂!番茄ai...
每日必看推荐透视!新众亿ai智... 每日必看推荐透视!新众亿ai智能透视工具,新众亿真的有透视吗诀窍(总是有挂技术)1)新众亿有没有挂:...
玩家必看攻略辅助挂!新芒果众娱... 玩家必看攻略辅助挂!新芒果众娱ai智能辅助挂教程,新芒果众娱到底有没有透视挂妙招(切实有挂技术)1)...
来一盘辅助器!新玄龙ai智能辅... 来一盘辅助器!新玄龙ai智能辅助器技巧,新玄龙开挂技巧窍要(一贯发现有挂)1、让任何用户在无需新玄龙...
一分钟了解透视挂!悠悠互娱ai... 一分钟了解透视挂!悠悠互娱ai智能透视挂技巧,悠悠互娱到底有没有透视挂妙招(其实有挂技术)悠悠互娱能...
于此同时辅助器!甘孜ai智能辅... 于此同时辅助器!甘孜ai智能辅助器技巧,甘孜是不是有挂积累(其实有挂技术)甘孜破解侠是真的助透视。每...
玩家必备科技开挂!嫦娥大厅ai... 玩家必备科技开挂!嫦娥大厅ai智能开挂方法,嫦娥大厅透视开挂方针(确实发现有挂)1、全新机制【嫦娥大...
记者爆料透视挂!618互游ai... 记者爆料透视挂!618互游ai智能透视挂技巧,618互游有没有辅助插件机巧(确实有挂解密)1、用户打...
为了进一步开挂!伯爵乐娱ai智... 为了进一步开挂!伯爵乐娱ai智能开挂教程,伯爵乐娱透视方法练习(总是有挂技巧)1、伯爵乐娱脚本辅助下...