fix: clean up properly shared modal page router outlets

e2e/modal-navigation-ng/app/app.component.ts

@@ -1,21 +1,27 @@
-import { Component } from "@angular/core";
+import { Component, ViewContainerRef } from "@angular/core";
 import { Router, NavigationEnd } from "@angular/router";
 import { NSLocationStrategy } from "nativescript-angular/router/ns-location-strategy";
 
+import { ViewContainerRefService } from "./shared/ViewContainerRefService";
+
 @Component({
     selector: "ns-app",
     templateUrl: "app.component.html",
 })
 
 export class AppComponent {
-    constructor(router: Router, location: NSLocationStrategy) {
+    constructor(
+        router: Router, 
+        location: NSLocationStrategy,
+        private _vcRef: ViewContainerRef,
+        private _viewContainerRefService: ViewContainerRefService) {
         router.events.subscribe(e => {
-            // console.log("[ROUTER]: " + e.toString());
-
             if (e instanceof NavigationEnd) {
                 console.log("[ROUTER]: " + e.toString());
                console.log(location.toString());
             }
         });
+
+        this._viewContainerRefService.root = this._vcRef;
     }
 }

e2e/modal-navigation-ng/app/app.module.ts

@@ -9,9 +9,13 @@ import { ModalSecondComponent } from "./modal-second/modal-second.component";
 import { ModalComponent } from "./modal/modal.component";
 import { NestedModalComponent } from "./modal-nested/modal-nested.component";
 import { ModalRouterComponent } from "./modal/modal-router/modal-router.component";
+import { ModalViewComponent } from "./modal-shared/modal-view.component";
+import { ModalViewContentComponent } from "./modal-shared/modal-view-content.component";
+import { ModalSharedSecondComponent } from "./modal-shared/modal-shared-second.component";
+import { ViewContainerRefService } from "./shared/ViewContainerRefService";
 
-import { enable as traceEnable, addCategories } from "tns-core-modules/trace";
-import { routerTraceCategory } from "nativescript-angular/trace";
+// import { enable as traceEnable, addCategories } from "tns-core-modules/trace";
+// import { routerTraceCategory } from "nativescript-angular/trace";
 
 // addCategories(routerTraceCategory);
 // traceEnable();
@@ -24,15 +28,26 @@ import { routerTraceCategory } from "nativescript-angular/trace";
         NativeScriptModule,
         AppRoutingModule
     ],
-    entryComponents: [ModalRouterComponent, NestedModalComponent, ModalComponent],
+    entryComponents: [
+        ModalRouterComponent, 
+        NestedModalComponent, 
+        ModalComponent,
+        ModalViewComponent
+    ],
     declarations: [
         AppComponent,
         HomeComponent,
         SecondComponent,
         ModalComponent,
         NestedModalComponent,
         ModalRouterComponent,
-        ModalSecondComponent
+        ModalSecondComponent,
+        ModalViewComponent,
+        ModalViewContentComponent,
+        ModalSharedSecondComponent
+    ],
+    providers: [
+        ViewContainerRefService
     ],
     schemas: [
         NO_ERRORS_SCHEMA

e2e/modal-navigation-ng/app/app.routing.ts

@@ -1,13 +1,14 @@
 import { NgModule } from "@angular/core";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
-import { Routes, ChildrenOutletContexts } from "@angular/router";
+import { Routes } from "@angular/router";
 
 import { HomeComponent } from "./home/home.component";
 import { SecondComponent } from "./second/second.component";
 import { ModalSecondComponent } from "./modal-second/modal-second.component";
 import { ModalComponent } from "./modal/modal.component";
 import { NestedModalComponent } from "./modal-nested/modal-nested.component";
-import { ModalRouterComponent } from "./modal/modal-router/modal-router.component";
+import { ModalViewContentComponent } from "./modal-shared/modal-view-content.component";
+import { ModalSharedSecondComponent } from "./modal-shared/modal-shared-second.component";
 
 const routes: Routes = [
     { path: "", redirectTo: "/home", pathMatch: "full" },
@@ -28,6 +29,12 @@ const routes: Routes = [
             },
             { path: "modal-second", component: ModalSecondComponent }
         ]
+    },
+    {
+        path: "modal-shared", component: ModalViewContentComponent, outlet: "modalOutlet"
+    },
+    {
+        path: "modal-shared-second-host", component: ModalSharedSecondComponent
     }
 ];
 

e2e/modal-navigation-ng/app/home/home.component.html

@@ -9,4 +9,7 @@
     <Button text="Reset Frame Root View" (tap)="onFrameRootViewReset()"></Button>
     <Button text="Reset Tab Root View"></Button>
     <Button text="Reset Layout Root View"></Button>
+    <Button text="show shared modal" (tap)="onRootModalTap()"></Button>
+    <Button text="go to second (to open shared modal)" [nsRouterLink]="['/modal-shared-second-host']"></Button>
+    <Label text="home component" verticalAlignment="bottom"></Label>
 </StackLayout>  

e2e/modal-navigation-ng/app/home/home.component.ts

@@ -1,20 +1,24 @@
 import { Component, ViewContainerRef } from "@angular/core";
 import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs";
+import { RouterExtensions } from "nativescript-angular/router";
 import { EventData } from "tns-core-modules/data/observable";
-import { Frame } from "tns-core-modules/ui/frame";
-import { View } from "tns-core-modules/ui/core/view";
+
+import { ViewContainerRefService } from "../shared/ViewContainerRefService";
 import { ModalRouterComponent } from "../modal/modal-router/modal-router.component";
-import { PageRouterOutlet } from "nativescript-angular/router/page-router-outlet";
-import { RouterExtensions } from "nativescript-angular/router";
 import { ModalComponent } from "../modal/modal.component";
+import { ModalViewComponent } from "../modal-shared/modal-view.component";
 
 @Component({
     moduleId: module.id,
     selector: "home-page",
     templateUrl: "./home.component.html"
 })
 export class HomeComponent {
-    constructor(private modal: ModalDialogService, private vcRef: ViewContainerRef, private routerExtension: RouterExtensions) { }
+    constructor(
+        private modal: ModalDialogService, 
+        private vcRef: ViewContainerRef, 
+        private viewContainerRefService: ViewContainerRefService,
+        private routerExtension: RouterExtensions) { }
 
     onModalNoFrame(args: EventData) {
         const options: ModalDialogOptions = {
@@ -52,4 +56,17 @@ export class HomeComponent {
     onFrameRootViewReset(args: EventData) {
 
     }
+
+    onRootModalTap(): void {
+        const options: ModalDialogOptions = {
+            viewContainerRef: this.viewContainerRefService.root,
+            context: {},
+            fullscreen: true
+        };
+
+        this.modal.showModal(ModalViewComponent, options)
+            .then((result: string) => {
+                console.log(result);
+            });
+    }
 }

e2e/modal-navigation-ng/app/modal-shared/modal-shared-second.component.ts

@@ -0,0 +1,44 @@
+import { Component } from "@angular/core";
+import { ModalDialogOptions, ModalDialogService } from "nativescript-angular/modal-dialog";
+
+import { ViewContainerRefService } from "../shared/ViewContainerRefService";
+import { ModalViewComponent } from "../modal-shared/modal-view.component";
+import { RouterExtensions } from "nativescript-angular/router";
+
+@Component({
+    selector: "ns-second",
+    moduleId: module.id,
+    template: `
+    <StackLayout class="page">
+        <Button text="show shared modal" (tap)="onRootModalTap()"></Button>
+        <Button text="go back" (tap)="onBackTap()"></Button>
+        <Label text="second component"></Label>
+    </StackLayout>
+    `
+})
+export class ModalSharedSecondComponent {
+    constructor(
+        private _modalService: ModalDialogService,
+        private _viewContainerRefService: ViewContainerRefService,
+        private _routerExtensions: RouterExtensions
+    ) { }
+
+    onRootModalTap(): void {
+        const options: ModalDialogOptions = {
+            viewContainerRef: this._viewContainerRefService.root,
+            context: {},
+            fullscreen: true
+        };
+
+        this._modalService.showModal(ModalViewComponent, options)
+            .then((result: string) => {
+                console.log(result);
+            });
+    }
+
+    onBackTap() {
+        if (this._routerExtensions.canGoBack()) {
+            this._routerExtensions.back();
+        }
+    }
+}

e2e/modal-navigation-ng/app/modal-shared/modal-view-content.component.ts

@@ -0,0 +1,27 @@
+import { Component } from "@angular/core";
+import { ModalDialogParams } from "nativescript-angular/modal-dialog";
+
+@Component({
+    selector: "ModalViewContent",
+    moduleId: module.id,
+    template: `
+    <ActionBar title="SHARED MODAL VIEW" class="action-bar">
+    </ActionBar>
+
+    <StackLayout class="page">
+        <Button text="close modal" (tap)="onTap()"></Button>
+    </StackLayout>
+    `,
+    styles: [`
+    .action-bar, .page {
+        background-color: chocolate;
+    }
+    `]
+})
+export class ModalViewContentComponent {
+    constructor(private _params: ModalDialogParams) { }
+
+    onTap(): void {
+        this._params.closeCallback("return value");
+    }
+}

e2e/modal-navigation-ng/app/modal-shared/modal-view.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from "@angular/core";
+import { RouterExtensions } from "nativescript-angular/router";
+
+@Component({
+    selector: "ModalView",
+    moduleId: module.id,
+    template:`
+    <page-router-outlet name="modalOutlet"></page-router-outlet>
+    `
+})
+export class ModalViewComponent implements OnInit {
+    constructor(private _routerExtensions: RouterExtensions) {}
+
+    ngOnInit(): void {
+        this._routerExtensions.navigate([{ outlets: { modalOutlet: ["modal-shared"]}}]);
+    }
+}

e2e/modal-navigation-ng/app/shared/ViewContainerRefService.ts

@@ -0,0 +1,14 @@
+import { Injectable, ViewContainerRef } from "@angular/core";
+
+@Injectable()
+export class ViewContainerRefService {
+    private _rootViewContainerRef: ViewContainerRef;
+
+    get root():ViewContainerRef {
+        return this._rootViewContainerRef;
+    }
+
+    set root(viewContainerRef: ViewContainerRef) {
+        this._rootViewContainerRef = viewContainerRef;
+    }
+}