fix-next(dialogs): integrate showModal method with changes in 4.0

Rename RootView class to AppHostView class.
Expose ngAppRoot property of AppHostView class.
Add modal-nested-test example.

Author: vchimev

nativescript-angular/app-host-view.ts

@@ -0,0 +1,6 @@
+import { ContentView } from "tns-core-modules/ui/content-view";
+import { ViewBase } from "tns-core-modules/ui/core/view/view";
+
+export class AppHostView extends ContentView {
+    ngAppRoot: ViewBase;
+}

nativescript-angular/directives/dialogs.ts

@@ -10,8 +10,9 @@ import {
 } from "@angular/core";
 
 import { Page } from "tns-core-modules/ui/page";
-import { View } from "tns-core-modules/ui/core/view";
+import { View, ViewBase } from "tns-core-modules/ui/core/view";
 
+import { AppHostView } from "../app-host-view";
 import { DetachedLoader } from "../common/detached-loader";
 import { PageFactory, PAGE_FACTORY } from "../platform-providers";
 
@@ -35,15 +36,15 @@ interface ShowDialogOptions {
     doneCallback;
     fullscreen: boolean;
     pageFactory: PageFactory;
-    parentPage: Page;
+    parentView: ViewBase;
     resolver: ComponentFactoryResolver;
     type: Type<any>;
 }
 
 @Injectable()
 export class ModalDialogService {
     public showModal(type: Type<any>,
-        {viewContainerRef, moduleRef, context, fullscreen}: ModalDialogOptions
+        { viewContainerRef, moduleRef, context, fullscreen }: ModalDialogOptions
     ): Promise<any> {
         if (!viewContainerRef) {
             throw new Error(
@@ -52,11 +53,15 @@ export class ModalDialogService {
             );
         }
 
-        const parentPage: Page = viewContainerRef.injector.get(Page);
+        let parentView = viewContainerRef.element.nativeElement;
+        if (parentView instanceof AppHostView && parentView.ngAppRoot) {
+            parentView = parentView.ngAppRoot;
+        }
+
         const pageFactory: PageFactory = viewContainerRef.injector.get(PAGE_FACTORY);
 
         // resolve from particular module (moduleRef)
-        // or from same module as parentPage (viewContainerRef)
+        // or from same module as parentView (viewContainerRef)
         const componentContainer = moduleRef || viewContainerRef;
         const resolver = componentContainer.injector.get(ComponentFactoryResolver);
 
@@ -67,7 +72,7 @@ export class ModalDialogService {
                 doneCallback: resolve,
                 fullscreen,
                 pageFactory,
-                parentPage,
+                parentView,
                 resolver,
                 type,
             }), 10);
@@ -80,7 +85,7 @@ export class ModalDialogService {
         doneCallback,
         fullscreen,
         pageFactory,
-        parentPage,
+        parentView,
         resolver,
         type,
     }: ShowDialogOptions): void {
@@ -113,7 +118,7 @@ export class ModalDialogService {
             }
 
             page.content = componentView;
-            parentPage.showModal(page, context, closeCallback, fullscreen);
+            parentView.showModal(page, context, closeCallback, fullscreen);
         });
     }
 }

nativescript-angular/platform-common.ts

@@ -24,6 +24,7 @@ import { DOCUMENT } from "@angular/common";
 
 import { bootstrapLog, bootstrapLogError } from "./trace";
 import { PAGE_FACTORY, PageFactory, defaultPageFactoryProvider, setRootPage } from "./platform-providers";
+import { AppHostView } from "./app-host-view";
 
 import {
     setCssFileName,
@@ -37,11 +38,10 @@ import {
 } from "tns-core-modules/application";
 import { NavigationEntry } from "tns-core-modules/ui/frame";
 import { Page } from "tns-core-modules/ui/page";
-import { ContentView } from "tns-core-modules/ui/content-view";
 import { TextView } from "tns-core-modules/ui/text-view";
 
 import "nativescript-intl";
-import { View, Color } from "tns-core-modules/ui/core/view/view";
+import { Color, View } from "tns-core-modules/ui/core/view/view";
 
 export const onBeforeLivesync = new EventEmitter<NgModuleRef<any>>();
 export const onAfterLivesync = new EventEmitter<{ moduleRef?: NgModuleRef<any>; error?: Error }>();
@@ -147,8 +147,8 @@ export class NativeScriptPlatformRef extends PlatformRef {
     @profile
     private bootstrapNativeScriptApp() {
         // Create a temp page for root of the renderer
-        const tempRootView = new RootView();
-        setRootPage(<any>tempRootView);
+        const tempAppHostView = new AppHostView();
+        setRootPage(<any>tempAppHostView);
         let rootContent: View;
 
         bootstrapLog("NativeScriptPlatform bootstrap started.");
@@ -164,9 +164,10 @@ export class NativeScriptPlatformRef extends PlatformRef {
                         bootstrapPromiseCompleted = true;
 
                         bootstrapLog(`Angular bootstrap bootstrap done. uptime: ${uptime()}`);
-                        rootContent = tempRootView.content;
-                        tempRootView.content = null;
-                        rootContent.parentNode = tempRootView;
+                        rootContent = tempAppHostView.content;
+                        tempAppHostView.content = null;
+                        tempAppHostView.ngAppRoot = rootContent;
+                        rootContent.parentNode = tempAppHostView;
                         lastBootstrappedModule = new WeakRef(moduleRef);
                     },
                     err => {
@@ -204,8 +205,8 @@ export class NativeScriptPlatformRef extends PlatformRef {
 
         onBeforeLivesync.next(lastBootstrappedModule ? lastBootstrappedModule.get() : null);
 
-        const tempRootView = new RootView();
-        setRootPage(<any>tempRootView);
+        const tempAppHostView = new AppHostView();
+        setRootPage(<any>tempAppHostView);
         let rootContent: View;
 
         let bootstrapPromiseCompleted = false;
@@ -215,9 +216,10 @@ export class NativeScriptPlatformRef extends PlatformRef {
                 bootstrapLog("Angular livesync done.");
                 onAfterLivesync.next({ moduleRef });
 
-                rootContent = tempRootView.content;
-                tempRootView.content = null;
-                rootContent.parentNode = tempRootView;
+                rootContent = tempAppHostView.content;
+                tempAppHostView.content = null;
+                tempAppHostView.ngAppRoot = rootContent;
+                rootContent.parentNode = tempAppHostView;
                 lastBootstrappedModule = new WeakRef(moduleRef);
             },
             error => {
@@ -256,5 +258,3 @@ export class NativeScriptPlatformRef extends PlatformRef {
         return errorTextBox;
     }
 }
-
-class RootView extends ContentView {}

ng-sample/app/app.ts

@@ -46,6 +46,7 @@ import { HttpTest } from "./examples/http/http-test";
 import { HttpClientTest } from "./examples/http-client/http-client-test";
 import { ActionBarTest } from "./examples/action-bar/action-bar-test";
 import { ModalTest } from "./examples/modal/modal-test";
+import { ModalNestedTest } from "./examples/modal/modal-nested-test";
 import { PlatfromDirectivesTest } from "./examples/platform-directives/platform-directives-test";
 import { LivesyncApp } from "./examples/livesync-test/livesync-test-app";
 
@@ -185,7 +186,5 @@ onAfterLivesync.subscribe(({ moduleRef, error }) => {
 });
 
 // platformNativeScriptDynamic().bootstrapModule(makeExampleModule(LivesyncApp));
-console.log("APP RESTART!!!!  !!!");
-// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(RendererTest));
-// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(PageRouterOutletAppComponent));
-platformNativeScriptDynamic().bootstrapModule(makeExampleModule(PageRouterOutletNestedAppComponent));
+// console.log("APP RESTART!!!!  !!!");
+platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ModalTest));

ng-sample/app/examples/modal/modal-content.ts

@@ -1,5 +1,5 @@
-import {Component, Input} from "@angular/core";
-import {ModalDialogParams} from "nativescript-angular/directives/dialogs";
+import { Component, Input } from "@angular/core";
+import { ModalDialogParams } from "nativescript-angular/directives/dialogs";
 
 @Component({
     selector: "modal-content",
@@ -14,7 +14,9 @@ import {ModalDialogParams} from "nativescript-angular/directives/dialogs";
     `
 })
 export class ModalContent {
+
     @Input() public prompt: string;
+
     constructor(private params: ModalDialogParams) {
         console.log("ModalContent.constructor: " + JSON.stringify(params));
         this.prompt = params.context.promptMsg;
@@ -26,10 +28,10 @@ export class ModalContent {
 
     ngOnInit() {
         console.log("ModalContent.ngOnInit");
-
     }
 
     ngOnDestroy() {
         console.log("ModalContent.ngOnDestroy");
     }
+
 }

ng-sample/app/examples/modal/modal-nested-test.ts

@@ -0,0 +1,24 @@
+import { Component, ViewContainerRef } from "@angular/core";
+import * as dialogs from "ui/dialogs";
+import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs";
+import { ModalContent } from "./modal-content";
+import { ModalTest } from "./modal-test";
+
+@Component({
+    selector: "modal-nested-test",
+    template: `
+        <modal-test></modal-test>
+    `
+})
+export class ModalNestedTest {
+
+    static entries = [
+        ModalContent
+    ];
+
+    static exports = [
+        ModalContent,
+        ModalTest
+    ];
+
+}

ng-sample/app/examples/modal/modal-test.ts

@@ -1,7 +1,7 @@
 import { Component, ViewContainerRef } from "@angular/core";
 import * as dialogs from "ui/dialogs";
 import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs";
-import { ModalContent} from "./modal-content";
+import { ModalContent } from "./modal-content";
 
 @Component({
     selector: "modal-test",
@@ -10,24 +10,22 @@ import { ModalContent} from "./modal-content";
         <StackLayout verticalAlignment="top" margin="12">
             <Button text="show component" (tap)="showModal(false)"></Button>
             <Button text="show component fullscreen" (tap)="showModal(true)"></Button>
-            
+
             <Button text="alert" (tap)="showAlert()"></Button>
             <Button text="confirm" (tap)="showConfirm()"></Button>
             <Button text="prompt" (tap)="showPrompt()"></Button>
-            
             <Button text="action" (tap)="showAction()"></Button>
             <Button text="login" (tap)="showLogin()"></Button>
         </StackLayout>
-        
         <Label [text]="'RESULT: ' + result" row="1" margin="12"></Label>
     </GridLayout>
     `
 })
 export class ModalTest {
+
     public result: string = "result";
 
-    constructor(private modal: ModalDialogService, private vcRef: ViewContainerRef) {
-    }
+    constructor(private modal: ModalDialogService, private vcRef: ViewContainerRef) { }
 
     static entries = [
         ModalContent
@@ -110,4 +108,5 @@ export class ModalTest {
                 "no result";
         });
     }
+
 }