AngularRouteReuseStrategy返回时的问题/跨模块
创始人
2024-10-29 06:00:49
0

在Angular中,当我们使用RouteReuseStrategy来在页面上重复使用一个组件时,有时候会遇到一些返回时的问题,尤其是在进行跨模块的页面跳转时会更加明显。在这种情况下,我们可以通过以下方法来解决这个问题:

1.在应用的module.ts文件中,定义RouteReuseStrategy。

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

import { AppComponent } from './app.component'; import { AppRoutingCache } from './app-routing.cache';

@NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [ { // 注入自定义 RouteReuseStrategy provide: RouteReuseStrategy, useClass: AppRoutingCache, }, ], bootstrap: [AppComponent], }) export class AppModule {}

2.定义一个自定义的RouteReuseStrategy类,并继承默认的RouteReuseStrategy。

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

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

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

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

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

retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { if (!route.routeConfig) { return null; } return this.handlers[route.url.join('/')]; }

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

在自定义的RouteReuseStrategy中,我们实现了shouldDetach(), store(), shouldAttach(), retrieve()和shouldReuseRoute()方法。

我们通过shouldDetach()方法允许我们缓存所有页面,store

相关内容

热门资讯

可靠教程!wepooke ap... 可靠教程!wepooke app系统规律(wepoke辅助插件)wepOkE(都是真的有挂);值得一...
wpk真的有外 挂!wpk俱乐... wpk真的有外 挂!wpk俱乐部机器人(WPk)都是真的有挂-详细辅助挂教程1、进入游戏-大厅左侧-...
微扑克ai机器人!微扑克靠谱,... 微扑克ai机器人!微扑克靠谱,微扑克wpk安全(切实真的是有挂)您好,微扑克,确实是有挂的,很多玩家...
wpk辅助挂!扑克世界辅助软件... 《wpk辅助挂!扑克世界辅助软件,wpk外挂是真的还是(详细透视挂教程)》 wpk辅助挂软件透明挂更...
wepoke辅助插件!we-p... wepoke辅助插件!we-poke有挂(透视辅助)WepOke(一贯真的有挂);亲,其实确实真的有...
wpk德州透视辅助!wpk长期... wpk德州透视辅助!wpk长期盈利打法(wPK)原来真的有挂-详细透视教程1、进入游戏-大厅左侧-新...
wpk有外 挂!wepoke人... wpk有外 挂!wepoke人有挂,扑克世界辅助软件(详细透视挂教程)准备好在wpk有外 挂ia的高...
微扑克系统发牌规律!微扑克专用... 微扑克系统发牌规律!微扑克专用辅助程序,wpk总是有挂,高科技教程(有挂详情)1、微扑克ai机器人多...
扑克教程!wepoke德扑之星... 扑克教程!wepoke德扑之星(wepoke辅助机器人)wepoke(本来真的有挂)1、每一步都需要...
wpk发牌逻辑!wpk游戏是否... wpk发牌逻辑!wpk游戏是否有挂(WPk)总是真的有挂-详细透视辅助教程;1、在wpkai机器人技...