fix: clean up properly shared modal page router outlets

Author: manoldonev

Diff for: 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;
     }
 }

Diff for: e2e/modal-navigation-ng/app/app.module.ts

@@ -8,6 +8,10 @@ import { ItemsComponent } from "./item/items.component";
 import { ItemDetailComponent } from "./item/item-detail.component";
 import { HomeComponent } from "./home/home.component";
 import { ModalTest } from "./modal/modal-test";
+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";
 
 // Uncomment and add to NgModule imports if you need to use two-way binding
 // import { NativeScriptFormsModule } from "nativescript-angular/forms";
@@ -23,17 +27,24 @@ import { ModalTest } from "./modal/modal-test";
         NativeScriptModule,
         AppRoutingModule
     ],
-    entryComponents: [...ModalTest.entries],
+    entryComponents: [
+        ModalViewComponent,
+        ...ModalTest.entries
+    ],
     declarations: [
         AppComponent,
         ItemsComponent,
         ItemDetailComponent,
         HomeComponent,
+        ModalViewComponent,
+        ModalViewContentComponent,
         ModalTest,
+        ModalSharedSecondComponent,
         ...ModalTest.entries
     ],
     providers: [
-        ItemService
+        ItemService,
+        ViewContainerRefService
     ],
     schemas: [
         NO_ERRORS_SCHEMA

Diff for: e2e/modal-navigation-ng/app/app.routing.ts

@@ -6,16 +6,29 @@ import { HomeComponent } from "./home/home.component";
 import { ItemsComponent } from "./item/items.component";
 import { ItemDetailComponent } from "./item/item-detail.component";
 import { ModalTest } from "./modal/modal-test";
+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" },
 
     { path: "home", component: HomeComponent },
 
-    { path: "modal", component: ModalTest , children: [
-        { path: "items", component: ItemsComponent },
-        { path: "item/:id", component: ItemDetailComponent },
-    ] },
+    {
+        path: "modal", component: ModalTest, 
+        children: [
+            { path: "items", component: ItemsComponent },
+            { path: "item/:id", component: ItemDetailComponent },
+        ]
+    },
+
+    {
+        path: "modal-shared", component: ModalViewContentComponent, outlet: "modalOutlet"
+    },
+
+    {
+        path: "modal-shared-second-host", component: ModalSharedSecondComponent
+    }
 ];
 
 @NgModule({

Diff for: e2e/modal-navigation-ng/app/home/home.component.ts

@@ -1,21 +1,36 @@
-import { Component, ViewContainerRef } from "@angular/core";
-import { RouterExtensions } from "nativescript-angular/router";
+import { Component } from "@angular/core";
+import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/modal-dialog";
+
+import { ViewContainerRefService } from "../shared/ViewContainerRefService";
+import { ModalViewComponent } from "../modal-shared/modal-view.component";
 
 @Component({
     selector: "modal-test",
     template: `
-    <GridLayout rows="*, auto">
-        <Button text="got to modal page" (tap)="gotToModal()"></Button>
+    <GridLayout rows="auto, auto, auto, *">
+        <Button text="go to modal test page" [nsRouterLink]="['/modal']"></Button>
+        <Button row="1" text="show shared modal" (tap)="onRootModalTap()"></Button>
+        <Button row="2" text="go to second (to open shared modal)" [nsRouterLink]="['/modal-shared-second-host']"></Button>
+        <Label row="3" text="home component" verticalAlignment="bottom"></Label>
     </GridLayout>
     `
 })
 export class HomeComponent {
+    constructor(
+        private _modalService: ModalDialogService,
+        private _viewContainerRefService: ViewContainerRefService
+    ) { }
 
-    public result: string = "result";
-
-    constructor(private _routerExtensions: RouterExtensions, private vcRef: ViewContainerRef) { }
+    onRootModalTap(): void {
+        const options: ModalDialogOptions = {
+            viewContainerRef: this._viewContainerRefService.root,
+            context: {},
+            fullscreen: true
+        };
 
-    public gotToModal() {
-        this._routerExtensions.navigate(["/modal"]); //{clearHistory: true}
+        this._modalService.showModal(ModalViewComponent, options)
+            .then((result: string) => {
+                console.log(result);
+            });
     }
 }

Diff for: 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();
+        }
+    }
+}

Diff for: 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");
+    }
+}

Diff for: 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"]}}]);
+    }
+}

Diff for: 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;
+    }
+}