feat(router): enable flexible page router outlets

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

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

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

@@ -6,6 +6,8 @@ import { AppComponent } from "./app.component";
 import { ItemService } from "./item/item.service";
 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";
 
 // Uncomment and add to NgModule imports if you need to use two-way binding
 // import { NativeScriptFormsModule } from "nativescript-angular/forms";
@@ -21,10 +23,14 @@ import { ItemDetailComponent } from "./item/item-detail.component";
         NativeScriptModule,
         AppRoutingModule
     ],
+    entryComponents: [...ModalTest.entries],
     declarations: [
         AppComponent,
         ItemsComponent,
-        ItemDetailComponent
+        ItemDetailComponent,
+        HomeComponent,
+        ModalTest,
+        ...ModalTest.entries
     ],
     providers: [
         ItemService

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

@@ -2,13 +2,20 @@ import { NgModule } from "@angular/core";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
 import { Routes } from "@angular/router";
 
+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";
 
 const routes: Routes = [
-    { path: "", redirectTo: "/items", pathMatch: "full" },
-    { path: "items", component: ItemsComponent },
-    { path: "item/:id", component: ItemDetailComponent },
+    { path: "", redirectTo: "/home", pathMatch: "full" },
+
+    { path: "home", component: HomeComponent },
+
+    { path: "modal", component: ModalTest , children: [
+        { path: "items", component: ItemsComponent },
+        { path: "item/:id", component: ItemDetailComponent },
+    ] },
 ];
 
 @NgModule({

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

@@ -0,0 +1,21 @@
+import { Component, ViewContainerRef } from "@angular/core";
+import { RouterExtensions } from "nativescript-angular/router";
+
+@Component({
+    selector: "modal-test",
+    template: `
+    <GridLayout rows="*, auto">
+        <Button text="got to modal page" (tap)="gotToModal()"></Button>
+    </GridLayout>
+    `
+})
+export class HomeComponent {
+
+    public result: string = "result";
+
+    constructor(private _routerExtensions: RouterExtensions, private vcRef: ViewContainerRef) { }
+
+    public gotToModal() {
+        this._routerExtensions.navigate(["/modal"]); //{clearHistory: true}
+    }
+}

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, OnDestroy } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 
 import { Item } from "./item";
@@ -9,7 +9,7 @@ import { ItemService } from "./item.service";
     moduleId: module.id,
     templateUrl: "./item-detail.component.html",
 })
-export class ItemDetailComponent implements OnInit {
+export class ItemDetailComponent implements OnInit, OnDestroy {
     item: Item;
 
     constructor(
@@ -21,4 +21,7 @@ export class ItemDetailComponent implements OnInit {
         const id = +this.route.snapshot.params["id"];
         this.item = this.itemService.getItem(id);
     }
+
+    ngOnDestroy(): void {
+    }
 }

e2e/modal-navigation-ng/app/item/items.component.html

@@ -26,7 +26,7 @@
 <StackLayout class="page">
     <ListView [items]="items" class="list-group">
         <ng-template let-item="item">
-            <Label [nsRouterLink]="['/item', item.id]" [text]="item.name"
+            <Label [nsRouterLink]="['../item', item.id]" [text]="item.name"
                 class="list-group-item"></Label>
         </ng-template>
     </ListView>

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

@@ -0,0 +1,50 @@
+import { Component, Input } from "@angular/core";
+import { ModalDialogParams } from "nativescript-angular/directives/dialogs";
+import { RouterExtensions, PageRoute } from "nativescript-angular/router";
+import { ActivatedRoute } from "@angular/router";
+import { View } from "ui/core/view"
+
+@Component({
+    selector: "modal-content",
+    template: `
+    <GridLayout #rootLayout margin="24" horizontalAlignment="center" verticalAlignment="center" rows="*, auto">
+        <StackLayout>
+          <page-router-outlet></page-router-outlet>
+        </StackLayout>    
+        <StackLayout row="1" orientation="horizontal" marginTop="12">
+                <Button text="back" (tap)="back()"></Button>
+                <Button text="ok" (tap)="close('OK')"></Button>
+                <Button text="cancel" (tap)="close(rootLayout)"></Button>
+        </StackLayout>
+    </GridLayout>
+    `
+})
+export class ModalContent {
+
+    @Input() public prompt: string;
+    public yes: boolean = true;
+
+    constructor(private params: ModalDialogParams, private nav: RouterExtensions, private activeRoute: ActivatedRoute) {
+        console.log("ModalContent.constructor: " + JSON.stringify(params));
+        this.prompt = params.context.promptMsg;
+    }
+
+    public back() {
+        this.nav.back();
+    }
+
+    public close(layoutRoot: View) {
+        layoutRoot.closeModal();
+        // this.params.closeCallback(res);
+    }
+
+    ngOnInit() {
+        this.nav.navigate(["items"], { relativeTo: this.activeRoute });
+        console.log("ModalContent.ngOnInit");
+    }
+
+    ngOnDestroy() {
+        console.log("ModalContent.ngOnDestroy");
+    }
+
+}

e2e/modal-navigation-ng/app/modal/modal-nested-test.ts

@@ -0,0 +1,23 @@
+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 = [
+        ModalTest
+    ];
+
+}

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

@@ -0,0 +1,109 @@
+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";
+
+@Component({
+    selector: "modal-test",
+    template: `
+    <GridLayout rows="*, auto">
+        <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) { }
+
+    static entries = [
+        ModalContent
+    ];
+
+    public showModal(fullscreen: boolean) {
+        const options: ModalDialogOptions = {
+            context: { promptMsg: "This is the prompt message!" },
+            fullscreen: fullscreen,
+            viewContainerRef: this.vcRef
+        };
+
+        this.modal.showModal(ModalContent, options).then((res: string) => {
+            this.result = res || "empty result";
+            // console.log("MODAL:" + this.result);
+        });
+    }
+
+    public showAlert() {
+        dialogs.alert({
+            title: "Alert Title",
+            message: "The name will change.",
+            okButtonText: "OK"
+        }).then(() => {
+            this.result = "alert closed";
+        });
+    }
+
+    public showConfirm() {
+        dialogs.confirm({
+            title: "Name",
+            message: "Do you want to change the name?",
+            cancelButtonText: "No",
+            neutralButtonText: "Ignore",
+            okButtonText: "Yes"
+        }).then((confirmResult) => {
+            this.result = confirmResult + "";
+        });
+    }
+
+    public showPrompt() {
+        dialogs.prompt({
+            title: "Name",
+            message: "Enter name:",
+            cancelButtonText: "Cancel",
+            neutralButtonText: "Ignore",
+            okButtonText: "OK",
+            defaultText: "John Reese",
+            inputType: dialogs.inputType.text
+        }).then((promptResult) => {
+            this.result = promptResult.result ? promptResult.text : "no result";
+        });
+    }
+
+    public showAction() {
+        dialogs.action({
+            message: "Choose action:",
+            cancelButtonText: "Close",
+            actions: ["Foo", "Bar"]
+        }).then((actionResult) => {
+            this.result = actionResult;
+        });
+    }
+
+    public showLogin() {
+        dialogs.login({
+            title: "Name",
+            message: "Enter name:",
+            cancelButtonText: "Cancel",
+            neutralButtonText: "Ignore",
+            okButtonText: "OK",
+            userName: "John",
+            password: "Reese"
+        }).then((loginResult) => {
+            this.result = loginResult.result ?
+                ("user: " + loginResult.userName + " pass: " + loginResult.password) :
+                "no result";
+        });
+    }
+
+}