fix-next(dialogs): handle close modal

Sanitize router states and cache when closing modal view

Author: ADjenkov

Diff for: nativescript-angular/directives/dialogs.ts

@@ -9,6 +9,7 @@ import {
     ViewContainerRef,
 } from "@angular/core";
 
+import { NSLocationStrategy } from "../router/ns-location-strategy";
 import { Page } from "tns-core-modules/ui/page";
 import { View, ViewBase } from "tns-core-modules/ui/core/view";
 import { ProxyViewContainer } from "tns-core-modules/ui/proxy-view-container/proxy-view-container";
@@ -44,6 +45,9 @@ interface ShowDialogOptions {
 
 @Injectable()
 export class ModalDialogService {
+    constructor(private location: NSLocationStrategy) {
+    }
+
     public showModal(type: Type<any>,
         { viewContainerRef, moduleRef, context, fullscreen }: ModalDialogOptions
     ): Promise<any> {
@@ -66,8 +70,10 @@ export class ModalDialogService {
         const componentContainer = moduleRef || viewContainerRef;
         const resolver = componentContainer.injector.get(ComponentFactoryResolver);
 
+        this.location._beginModalNavigation();
+
         return new Promise(resolve => {
-            setTimeout(() => ModalDialogService.showDialog({
+            setTimeout(() => this._showDialog({
                 containerRef: viewContainerRef,
                 context,
                 doneCallback: resolve,
@@ -80,7 +86,7 @@ export class ModalDialogService {
         });
     }
 
-    private static showDialog({
+    private _showDialog({
         containerRef,
         context,
         doneCallback,
@@ -98,6 +104,10 @@ export class ModalDialogService {
             if (componentView) {
                 componentView.closeModal();
             }
+
+            this.location._beginCloseModalNavigation();
+            this.location.back();
+            this.location._finishCloseModalNavigation();
             detachedLoaderRef.instance.detectChanges();
             detachedLoaderRef.destroy();
         };

Diff for: nativescript-angular/router/ns-location-strategy.ts

@@ -24,6 +24,7 @@ export interface LocationState {
     queryParams: string;
     segmentGroup: UrlSegmentGroup;
     isPageNavigation: boolean;
+    isModalNavigation: boolean;
 }
 
 @Injectable()
@@ -33,9 +34,13 @@ export class NSLocationStrategy extends LocationStrategy {
     private currentOutlet: string;
     private popStateCallbacks = new Array<(_: any) => any>();
 
+    private _isModalClosing = false;
     private _isPageNavigationBack = false;
     private _currentNavigationOptions: NavigationOptions;
 
+
+    public _isModalNavigation = false;
+
     constructor(private frameService: FrameService) {
         super();
         routerLog("NSLocationStrategy.constructor()");
@@ -87,7 +92,8 @@ export class NSLocationStrategy extends LocationStrategy {
                     url: url,
                     queryParams: queryParams,
                     segmentGroup: rootOutlets[outletName],
-                    isPageNavigation: isNewPage
+                    isPageNavigation: isNewPage,
+                    isModalNavigation: false
                 });
             }
         });
@@ -130,7 +136,22 @@ export class NSLocationStrategy extends LocationStrategy {
     }
 
     back(): void {
-        if (this._isPageNavigationBack) {
+        if (this._isModalClosing) {
+            const states = this.statesByOutlet[this.currentOutlet];
+            // We are closing modal view
+            // clear the stack until we get to the page that opened the modal view
+            let state = states.pop();
+            let count = 1;
+
+            while (!(state.isModalNavigation)) {
+                state = states.pop();
+                count++;
+            }
+
+            states.push(state);
+            routerLog("NSLocationStrategy.back() while closing modal. States popped: " + count);
+            this.callPopState(state, true);
+        } else if (this._isPageNavigationBack) {
             const states = this.statesByOutlet[this.currentOutlet];
             // We are navigating to the previous page
             // clear the stack until we get to a page navigation state
@@ -178,6 +199,7 @@ export class NSLocationStrategy extends LocationStrategy {
 
     private callPopState(state: LocationState, pop: boolean = true) {
         const urlSerializer = new DefaultUrlSerializer();
+        this.currentUrlTree.root.children[this.currentOutlet] = state.segmentGroup;
         const url = urlSerializer.serialize(this.currentUrlTree);
         const change = { url: url, pop: pop };
         for (let fn of this.popStateCallbacks) {
@@ -199,11 +221,12 @@ export class NSLocationStrategy extends LocationStrategy {
         Object.keys(this.statesByOutlet).forEach(outletName => {
             const outletStates = this.statesByOutlet[outletName];
             const outletLog = outletStates
-                .map((v, i) => `${i}.[${v.isPageNavigation ? "PAGE" : "INTERNAL"}] "${v.segmentGroup.toString()}"`)
+                // tslint:disable-next-line:max-line-length
+                .map((v, i) => `${outletName}.${i}.[${v.isPageNavigation ? "PAGE" : "INTERNAL"}].[${v.isModalNavigation ? "MODAL" : "BASE"}] "${v.segmentGroup.toString()}"`)
                 .reverse();
 
-            result.push(`${outletName} :`);
-            result = result.concat(result, outletLog);
+
+            result = result.concat(outletLog);
         });
 
         return result.join("\n");
@@ -231,6 +254,33 @@ export class NSLocationStrategy extends LocationStrategy {
         return this._isPageNavigationBack;
     }
 
+    public _beginModalNavigation(): void {
+        routerLog("NSLocationStrategy._beginModalNavigation()");
+        const lastState = this.peekState(this.currentOutlet);
+
+        if (lastState) {
+            lastState.isModalNavigation = true;
+        }
+
+        this._isModalNavigation = true;
+    }
+
+    public _beginCloseModalNavigation(): void {
+        routerLog("NSLocationStrategy.startCloseModal()");
+        if (this._isModalClosing) {
+            throw new Error("Calling startCloseModal while closing modal.");
+        }
+        this._isModalClosing = true;
+    }
+
+    public _finishCloseModalNavigation() {
+        routerLog("NSLocationStrategy.finishCloseModalNavigation()");
+        if (!this._isModalClosing) {
+            throw new Error("Calling startCloseModal while not closing modal.");
+        }
+        this._isModalClosing = false;
+    }
+
     public _beginPageNavigation(name: string): NavigationOptions {
         routerLog("NSLocationStrategy._beginPageNavigation()");
         const lastState = this.peekState(name);

Diff for: nativescript-angular/router/ns-route-reuse-strategy.ts

@@ -12,6 +12,7 @@ import {
 interface CacheItem {
     key: string;
     state: DetachedRouteHandle;
+    isModal: boolean;
 }
 
 /**
@@ -48,6 +49,27 @@ class DetachedStateCache {
             destroyComponentRef(state.componentRef);
         }
     }
+
+    public clearModalCache() {
+        let removedItemsCount = 0;
+        this.cache = this.cache.filter(cacheItem => {
+
+            if (cacheItem.isModal) {
+                const state = <any>cacheItem.state;
+
+                if (!state.componentRef) {
+                    throw new Error("No componentRed found in DetachedRouteHandle");
+                }
+
+                destroyComponentRef(state.componentRef);
+                removedItemsCount++;
+            }
+
+            return !cacheItem.isModal;
+        });
+
+        log(`DetachedStateCache.clearModalCache() ${removedItemsCount} items will be destroyed`);
+    }
 }
 
 /**
@@ -100,7 +122,7 @@ export class NSRouteReuseStrategy implements RouteReuseStrategy {
         const cache = this.cacheByOutlet[route.outlet] = this.cacheByOutlet[route.outlet] || new DetachedStateCache();
 
         if (state) {
-            cache.push({ key, state });
+            cache.push({ key, state, isModal: this.location._isModalNavigation });
         } else {
             const topItem = cache.peek();
             if (topItem.key === key) {
@@ -148,11 +170,15 @@ export class NSRouteReuseStrategy implements RouteReuseStrategy {
         return shouldReuse;
     }
 
-    clearCache(outletName: string) {
+    clearCache(outletName: string, modalItemsOnly?: boolean) {
         const cache = this.cacheByOutlet[outletName];
 
         if (cache) {
-            cache.clear();
+            if (modalItemsOnly) {
+                cache.clearModalCache();
+            } else {
+                cache.clear();
+            }
         }
     }
 }

Diff for: nativescript-angular/router/page-router-outlet.ts

@@ -102,7 +102,7 @@ function routeToString(activatedRoute: ActivatedRoute | ActivatedRouteSnapshot):
 }
 
 @Directive({ selector: "page-router-outlet" }) // tslint:disable-line:directive-selector
-export class PageRouterOutlet implements OnDestroy, OnInit { // tslint:disable-line:directive-class-suffix
+export class PageRouterOutlet implements OnDestroy { // tslint:disable-line:directive-class-suffix
     private activated: ComponentRef<any> | null = null;
     private _activatedRoute: ActivatedRoute | null = null;
     private detachedLoaderFactory: ComponentFactory<DetachedLoader>;
@@ -161,28 +161,14 @@ export class PageRouterOutlet implements OnDestroy, OnInit { // tslint:disable-l
         this.detachedLoaderFactory = resolver.resolveComponentFactory(DetachedLoader);
     }
 
-    ngOnInit(): void {
-        if (this.isActivated) {
-            return;
-        }
-
-        // If the outlet was not instantiated at the time the route got activated we need to populate
-        // the outlet when it is initialized (ie inside a NgIf)
-        const context = this.parentContexts.getContext(this.name);
-        if (!context || !context.route) {
-            return;
-        }
+    ngOnDestroy(): void {
 
-        if (context.attachRef) {
-            // `attachRef` is populated when there is an existing component to mount
-            this.attach(context.attachRef, context.route);
-        } else {
-            // otherwise the component defined in the configuration is created
-            this.activateWith(context.route, context.resolver || null);
+        // Clear accumulated modal view page cache when page-router-outlet
+        // destroyed on modal view closing
+        if (this.locationStrategy._isModalNavigation) {
+            this.routeReuseStrategy.clearCache(this.name, true);
+            this.locationStrategy._isModalNavigation = false;
         }
-    }
-
-    ngOnDestroy(): void {
         this.parentContexts.onChildOutletDestroyed(this.name);
     }
 
@@ -267,7 +253,7 @@ export class PageRouterOutlet implements OnDestroy, OnInit { // tslint:disable-l
         loadedResolver: ComponentFactoryResolver
     ): void {
         log("PageRouterOutlet.activate() forward navigation - " +
-        "create detached loader in the loader container");
+            "create detached loader in the loader container");
 
         const factory = this.getComponentFactory(activatedRoute, loadedResolver);
         const page = this.pageFactory({