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: [
    {

相关内容

热门资讯

分享开挂内幕辅助器!开元绍兴游... 分享开挂内幕辅助器!开元绍兴游戏辅助器AIapp,开元绍兴游戏多功能都是有辅助器app1、玩家可以在...
一分钟快速了解透视挂!宁波游戏... 一分钟快速了解透视挂!宁波游戏大厅透视挂AI软件,宁波游戏大厅多功能一贯存在有透视挂软件1)宁波游戏...
一秒答解透视挂!微乐捉老麻子透... 一秒答解透视挂!微乐捉老麻子透视挂AIapp,微乐捉老麻子多功能都是是有透视挂app微乐捉老麻子脚本...
玩家亲测透视挂!微乐a3纸牌透... 玩家亲测透视挂!微乐a3纸牌透视挂AI教程,微乐a3纸牌多功能一直存在有透视挂教程1、该软件可以轻松...
玩家必看分享辅助!朋朋棋牌辅助... 玩家必看分享辅助!朋朋棋牌辅助AI攻略,朋朋棋牌多功能其实真的是有辅助攻略1、全新机制【朋朋棋牌ai...
分享一款透视挂!海豚大厅透视挂... 分享一款透视挂!海豚大厅透视挂AI插件,海豚大厅多功能本来有透视挂插件海豚大厅透视方法中分为三种模型...
玩家必看科普辅助器!乐乐上海麻... 玩家必看科普辅助器!乐乐上海麻将辅助器AI插件,乐乐上海麻将多功能真是有辅助器插件进入游戏-大厅左侧...
玩家必看教程!大赢家跑得快开挂... 玩家必看教程!大赢家跑得快开挂功能技巧,大赢家跑得快确实真的是有开挂技巧(有辅助挂教学)1、在大赢家...
玩家攻略推荐!德州扑克辅助器功... 玩家攻略推荐!德州扑克辅助器功能攻略,德州扑克好像有辅助器攻略(真的有辅助挂)1)德州扑克免费钻石:...
推荐一款!一起斗地主辅助功能神... 推荐一款!一起斗地主辅助功能神器,一起斗地主其实存在有辅助神器(有辅助挂教学)1、首先打开一起斗地主...