Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit dc8080b

Browse files
chore(modal-navigation): add reset root view mechanism (#1389)
1 parent aee4928 commit dc8080b

16 files changed

+269
-37
lines changed

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

Lines changed: 35 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
22
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
33
import { AppRoutingModule } from "./app.routing";
44
import { AppComponent } from "./app.component";
5+
import { TabComponent } from "./tab.component";
6+
import { LayoutComponent } from "./layout.component";
57

68
import { HomeComponent } from "./home/home.component";
79
import { SecondComponent } from "./second/second.component";
@@ -14,28 +16,31 @@ import { ModalViewContentComponent } from "./modal-shared/modal-view-content.com
1416
import { ModalSharedSecondComponent } from "./modal-shared/modal-shared-second.component";
1517
import { ViewContainerRefService } from "./shared/ViewContainerRefService";
1618

17-
// import { enable as traceEnable, addCategories } from "tns-core-modules/trace";
18-
// import { routerTraceCategory } from "nativescript-angular/trace";
19+
import { enable as traceEnable, addCategories } from "tns-core-modules/trace";
20+
import { routerTraceCategory } from "nativescript-angular/trace";
21+
import { NativeScriptPlatformRef } from "nativescript-angular";
1922

20-
// addCategories(routerTraceCategory);
21-
// traceEnable();
23+
addCategories(routerTraceCategory);
24+
traceEnable();
2225

2326
@NgModule({
24-
bootstrap: [
25-
AppComponent
26-
],
2727
imports: [
2828
NativeScriptModule,
2929
AppRoutingModule
3030
],
3131
entryComponents: [
32+
AppComponent,
33+
TabComponent,
34+
LayoutComponent,
3235
ModalRouterComponent,
3336
NestedModalComponent,
34-
ModalComponent,
37+
ModalComponent,
3538
ModalViewComponent
3639
],
3740
declarations: [
3841
AppComponent,
42+
TabComponent,
43+
LayoutComponent,
3944
HomeComponent,
4045
SecondComponent,
4146
ModalComponent,
@@ -56,4 +61,25 @@ import { ViewContainerRefService } from "./shared/ViewContainerRefService";
5661
/*
5762
Pass your application module to the bootstrapModule function located in main.ts to start your app
5863
*/
59-
export class AppModule { }
64+
65+
export class AppModule {
66+
private static appRef: any;
67+
public static platformRef: NativeScriptPlatformRef;
68+
public static root: string = "page-router";
69+
70+
ngDoBootstrap(app) {
71+
AppModule.appRef = app;
72+
AppModule.bootstrapRootComponent();
73+
}
74+
75+
static bootstrapRootComponent() {
76+
const options = {
77+
'page-router': AppComponent,
78+
'tab': TabComponent,
79+
'layout': LayoutComponent
80+
};
81+
82+
const component = options[AppModule.root];
83+
AppModule.appRef.bootstrap(component);
84+
}
85+
}

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

Lines changed: 60 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { NgModule } from "@angular/core";
22
import { NativeScriptRouterModule } from "nativescript-angular/router";
3-
import { Routes } from "@angular/router";
3+
import { Routes,Router } from "@angular/router";
44

55
import { HomeComponent } from "./home/home.component";
66
import { SecondComponent } from "./second/second.component";
@@ -10,6 +10,8 @@ import { NestedModalComponent } from "./modal-nested/modal-nested.component";
1010
import { ModalViewContentComponent } from "./modal-shared/modal-view-content.component";
1111
import { ModalSharedSecondComponent } from "./modal-shared/modal-shared-second.component";
1212

13+
import { AppModule } from "./app.module";
14+
1315
const routes: Routes = [
1416
{ path: "", redirectTo: "/home", pathMatch: "full" },
1517
{
@@ -38,8 +40,64 @@ const routes: Routes = [
3840
}
3941
];
4042

43+
const routesTab: Routes = [
44+
{ path: "", redirectTo: "/home(secondOutlet:second)", pathMatch: "full" },
45+
{
46+
path: "home", component: HomeComponent, children: [
47+
{
48+
path: "modal", component: ModalComponent, children: [
49+
{ path: "nested-frame-modal", component: NestedModalComponent }]
50+
},
51+
{
52+
path: "modal-second", component: ModalSecondComponent
53+
}
54+
]
55+
},
56+
{
57+
path: "second", component: SecondComponent, children: [
58+
{
59+
path: "modal", component: ModalComponent, children: [
60+
{ path: "nested-frame-modal", component: NestedModalComponent }]
61+
},
62+
{
63+
path: "modal-second", component: ModalSecondComponent
64+
}
65+
]
66+
},
67+
{
68+
path: "second", outlet: "secondOutlet", component: SecondComponent, children: [
69+
{
70+
path: "modal", component: ModalComponent, children: [
71+
{ path: "nested-frame-modal", component: NestedModalComponent }]
72+
},
73+
{
74+
path: "modal-second", component: ModalSecondComponent
75+
}
76+
]
77+
}
78+
];
79+
80+
const routesLayout: Routes = [
81+
{
82+
path: "modal", component: ModalComponent, children: [
83+
{ path: "nested-frame-modal", component: NestedModalComponent }]
84+
},
85+
{ path: "modal-second", component: ModalSecondComponent }
86+
]
87+
88+
4189
@NgModule({
4290
imports: [NativeScriptRouterModule.forRoot(routes)],
4391
exports: [NativeScriptRouterModule]
4492
})
45-
export class AppRoutingModule { }
93+
export class AppRoutingModule {
94+
constructor(private router: Router) {
95+
if (AppModule.root === "page-router") {
96+
this.router.resetConfig(routes);
97+
} else if (AppModule.root === "layout") {
98+
this.router.resetConfig(routesLayout);
99+
} else {
100+
this.router.resetConfig(routesTab);
101+
}
102+
}
103+
}

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,10 @@
77
<Button text="Show Modal Page With Frame" (tap)="onModalFrame()"></Button>
88
<Button text="Navigate To Second Page" (tap)="onNavigateSecond()"></Button>
99
<Button text="Reset Frame Root View" (tap)="onFrameRootViewReset()"></Button>
10-
<Button text="Reset Tab Root View"></Button>
11-
<Button text="Reset Layout Root View"></Button>
10+
<Button text="Reset Tab Root View" (tap)="onTabRootViewReset()"></Button>
11+
<Button text="Reset Layout Root View" (tap)="onLayoutRootViewReset()"></Button>
12+
<Button text="Show Dialog" (tap)="onShowDialog()"></Button>
13+
1214
<Button text="show shared modal" (tap)="onRootModalTap()"></Button>
1315
<Button text="go to second (to open shared modal)" [nsRouterLink]="['/modal-shared-second-host']"></Button>
1416
<Label text="home component" verticalAlignment="bottom"></Label>

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

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ import { ViewContainerRefService } from "../shared/ViewContainerRefService";
77
import { ModalRouterComponent } from "../modal/modal-router/modal-router.component";
88
import { ModalComponent } from "../modal/modal.component";
99
import { ModalViewComponent } from "../modal-shared/modal-view.component";
10+
import { confirm } from "ui/dialogs";
11+
12+
import { AppModule } from "../app.module";
1013

1114
@Component({
1215
moduleId: module.id,
@@ -15,12 +18,12 @@ import { ModalViewComponent } from "../modal-shared/modal-view.component";
1518
})
1619
export class HomeComponent {
1720
constructor(
18-
private modal: ModalDialogService,
19-
private vcRef: ViewContainerRef,
21+
private modal: ModalDialogService,
22+
private vcRef: ViewContainerRef,
2023
private viewContainerRefService: ViewContainerRefService,
2124
private routerExtension: RouterExtensions) { }
2225

23-
onModalNoFrame(args: EventData) {
26+
onModalNoFrame() {
2427
const options: ModalDialogOptions = {
2528
context: {
2629
navigationVisibility: false
@@ -34,7 +37,7 @@ export class HomeComponent {
3437
});
3538
}
3639

37-
onModalFrame(args: EventData) {
40+
onModalFrame() {
3841
const options: ModalDialogOptions = {
3942
context: {
4043
navigationVisibility: true,
@@ -49,12 +52,23 @@ export class HomeComponent {
4952
});
5053
}
5154

52-
onNavigateSecond(args: EventData) {
55+
onNavigateSecond() {
5356
this.routerExtension.navigate(["second"]);
5457
}
5558

56-
onFrameRootViewReset(args: EventData) {
57-
59+
onFrameRootViewReset() {
60+
AppModule.root = "page-router";
61+
AppModule.platformRef._livesync();
62+
}
63+
64+
onTabRootViewReset() {
65+
AppModule.root = "tab";
66+
AppModule.platformRef._livesync();
67+
}
68+
69+
onLayoutRootViewReset() {
70+
AppModule.root = "layout";
71+
AppModule.platformRef._livesync();
5872
}
5973

6074
onRootModalTap(): void {
@@ -69,4 +83,17 @@ export class HomeComponent {
6983
console.log(result);
7084
});
7185
}
86+
87+
onShowDialog() {
88+
let options = {
89+
title: "Dialog",
90+
message: "Message",
91+
okButtonText: "Yes",
92+
cancelButtonText: "No"
93+
}
94+
95+
confirm(options).then((result: boolean) => {
96+
console.log(result);
97+
})
98+
}
7299
}
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<StackLayout>
2+
<Label text="Home" horizontalAlignment="center"></Label>
3+
<Button text="Show Modal Without Frame" (tap)="onModalNoFrame()"></Button>
4+
<Button text="Show Modal Page With Frame" (tap)="onModalFrame()"></Button>
5+
<Button text="Reset Frame Root View" (tap)="onFrameRootViewReset()"></Button>
6+
<Button text="Reset Tab Root View" (tap)="onTabRootViewReset()"></Button>
7+
<Button text="Reset Layout Root View" (tap)="onLayoutRootViewReset()"></Button>
8+
<Button text="Show Dialog" (tap)="onShowDialog()"></Button>
9+
</StackLayout>
Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import { Component, ViewContainerRef } from "@angular/core";
2+
import { Router, NavigationEnd } from "@angular/router";
3+
import { NSLocationStrategy } from "nativescript-angular/router/ns-location-strategy";
4+
import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs";
5+
import { ModalComponent } from "./modal/modal.component";
6+
import { ModalViewComponent } from "./modal-shared/modal-view.component";
7+
import { ModalRouterComponent } from "./modal/modal-router/modal-router.component";
8+
import { confirm } from "ui/dialogs";
9+
10+
import { AppModule } from "./app.module";
11+
12+
import { ViewContainerRefService } from "./shared/ViewContainerRefService";
13+
14+
@Component({
15+
selector: "ns-layout",
16+
templateUrl: "layout.component.html",
17+
})
18+
19+
export class LayoutComponent {
20+
constructor(
21+
private modal: ModalDialogService,
22+
private router: Router,
23+
private location: NSLocationStrategy,
24+
private vcRef: ViewContainerRef,
25+
private _viewContainerRefService: ViewContainerRefService) {
26+
router.events.subscribe(e => {
27+
if (e instanceof NavigationEnd) {
28+
console.log("[ROUTER]: " + e.toString());
29+
console.log(location.toString());
30+
}
31+
});
32+
33+
this._viewContainerRefService.root = this.vcRef;
34+
}
35+
36+
onModalNoFrame() {
37+
const options: ModalDialogOptions = {
38+
context: {
39+
navigationVisibility: false
40+
},
41+
fullscreen: true,
42+
viewContainerRef: this.vcRef
43+
};
44+
45+
this.modal.showModal(ModalComponent, options).then((res: string) => {
46+
console.log("moda-no-frame closed");
47+
});
48+
}
49+
50+
onModalFrame() {
51+
const options: ModalDialogOptions = {
52+
context: {
53+
navigationVisibility: true,
54+
modalRoute: "modal"
55+
},
56+
fullscreen: true,
57+
viewContainerRef: this.vcRef
58+
};
59+
60+
this.modal.showModal(ModalRouterComponent, options).then((res: string) => {
61+
console.log("moda-frame closed");
62+
});
63+
}
64+
65+
onFrameRootViewReset() {
66+
AppModule.root = "page-router";
67+
AppModule.platformRef._livesync();
68+
}
69+
70+
onTabRootViewReset() {
71+
AppModule.root = "tab";
72+
AppModule.platformRef._livesync();
73+
}
74+
75+
onLayoutRootViewReset() {
76+
AppModule.root = "layout";
77+
AppModule.platformRef._livesync();
78+
}
79+
80+
onShowDialog() {
81+
let options = {
82+
title: "Dialog",
83+
message: "Message",
84+
okButtonText: "Yes",
85+
cancelButtonText: "No"
86+
}
87+
88+
confirm(options).then((result: boolean) => {
89+
console.log(result);
90+
})
91+
}
92+
}
Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
// this import should be first in order to load some required settings (like globals and reflect-metadata)
22
import { platformNativeScript } from "nativescript-angular/platform-static";
3-
3+
import { AppModule } from "./app.module";
4+
import { NativeScriptPlatformRef } from "nativescript-angular";
45
// "./app.module.ngfactory" is a dynamically generated module when compiled with AoT.
56
import { AppModuleNgFactory } from "./app.module.ngfactory";
67

7-
platformNativeScript().bootstrapModuleFactory(AppModuleNgFactory);
8+
AppModule.platformRef = <NativeScriptPlatformRef>platformNativeScript();
9+
AppModule.platformRef.bootstrapModuleFactory(AppModuleNgFactory);

‎e2e/modal-navigation-ng/app/main.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22
import { platformNativeScriptDynamic } from "nativescript-angular/platform";
33

44
import { AppModule } from "./app.module";
5+
import { NativeScriptPlatformRef } from "nativescript-angular";
56

6-
// A traditional NativeScript application starts by initializing global objects, setting up global CSS rules, creating, and navigating to the main page.
7-
// Angular applications need to take care of their own initialization: modules, components, directives, routes, DI providers.
8-
// A NativeScript Angular app needs to make both paradigms work together, so we provide a wrapper platform object, platformNativeScriptDynamic,
9-
// that sets up a NativeScript application and can bootstrap the Angular framework.
10-
platformNativeScriptDynamic().bootstrapModule(AppModule);
7+
AppModule.platformRef = <NativeScriptPlatformRef>platformNativeScriptDynamic();
8+
AppModule.platformRef.bootstrapModule(AppModule);

‎e2e/modal-navigation-ng/app/modal-second/modal-second.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,5 @@
55

66
<GridLayout #rootLayout rows="auto, auto" (loaded)="onLoaded($event)">
77
<Button text="Go Back" (tap)="goBack()"></Button>
8-
<Button row="1" text="Close Modal Nested" (tap)="close(rootLayout)"></Button>
8+
<Button row="1" text="Close Modal" (tap)="close(rootLayout)"></Button>
99
</GridLayout>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /