diff --git a/packages/angular/src/lib/legacy/router/ns-route-reuse-strategy.ts b/packages/angular/src/lib/legacy/router/ns-route-reuse-strategy.ts index cc645e8..4017d0d 100644 --- a/packages/angular/src/lib/legacy/router/ns-route-reuse-strategy.ts +++ b/packages/angular/src/lib/legacy/router/ns-route-reuse-strategy.ts @@ -120,12 +120,38 @@ export class NSRouteReuseStrategy implements RouteReuseStrategy { return shouldDetach; } + protected findValidOutletAndKey(targetRoute: ActivatedRouteSnapshot) { + let route = targetRoute; + const routeOutletKey = this.location.getRouteFullPath(route); + let outletKey = routeOutletKey; + let outlet = this.location.findOutlet(outletKey, route); + while (!outlet) { + if (!route.parent) { + return { outlet: null, outletKey: routeOutletKey }; + } + route = route.parent; + outletKey = this.location.getRouteFullPath(route); + outlet = this.location.findOutlet(outletKey, route); + } + + if (outlet) { + while (!outlet.outletKeys.includes(outletKey)) { + if (!route.parent) { + NativeScriptDebug.routeReuseStrategyLog(`Could not find valid outlet key for route: ${targetRoute}.`); + return { outlet, outletKey: routeOutletKey }; + } + route = route.parent; + outletKey = this.location.getRouteFullPath(route); + } + } + + return { outlet, outletKey }; + } shouldAttach(route: ActivatedRouteSnapshot): boolean { route = findTopActivatedRouteNodeForOutlet(route); - const outletKey = this.location.getRouteFullPath(route); - const outlet = this.location.findOutlet(outletKey, route); + const { outlet, outletKey } = this.findValidOutletAndKey(route); const cache = this.cacheByOutlet[outletKey]; if (!cache) { return false; @@ -154,7 +180,7 @@ export class NSRouteReuseStrategy implements RouteReuseStrategy { NativeScriptDebug.routeReuseStrategyLog(`store key: ${key}, state: ${state}`); } - const outletKey = this.location.getRouteFullPath(route); + const { outletKey } = this.findValidOutletAndKey(route); // tslint:disable-next-line:max-line-length const cache = (this.cacheByOutlet[outletKey] = this.cacheByOutlet[outletKey] || new DetachedStateCache()); @@ -183,8 +209,7 @@ export class NSRouteReuseStrategy implements RouteReuseStrategy { retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null { route = findTopActivatedRouteNodeForOutlet(route); - const outletKey = this.location.getRouteFullPath(route); - const outlet = this.location.findOutlet(outletKey, route); + const { outlet, outletKey } = this.findValidOutletAndKey(route); const cache = this.cacheByOutlet[outletKey]; if (!cache) { return null; diff --git a/packages/angular/src/lib/legacy/router/page-router-outlet.ts b/packages/angular/src/lib/legacy/router/page-router-outlet.ts index 29e9585..93fb85f 100644 --- a/packages/angular/src/lib/legacy/router/page-router-outlet.ts +++ b/packages/angular/src/lib/legacy/router/page-router-outlet.ts @@ -370,7 +370,10 @@ export class PageRouterOutlet implements OnDestroy { const clearCallback = () => setTimeout(() => { if (this.outlet) { - this.routeReuseStrategy.clearCache(this.outlet.outletKeys[0]); + // potential alternative fix (only fix children of the current outlet) + // const nests = outletKey.split('/'); + // this.outlet.outletKeys.filter((k) => k.split('/').length >= nests.length).forEach((key) => this.routeReuseStrategy.clearCache(key)); + this.outlet.outletKeys.forEach((key) => this.routeReuseStrategy.clearCache(key)); } });