Skip to content

Commit 6e7c051

Browse files
manoldonevmanoldonev
committed
fix: clean up properly shared modal page router outlets
1 parent b8c652a commit 6e7c051

15 files changed

+381
-83
lines changed

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

+10-4
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,27 @@
1-
import { Component } from "@angular/core";
1+
import { Component, ViewContainerRef } from "@angular/core";
22
import { Router, NavigationEnd } from "@angular/router";
33
import { NSLocationStrategy } from "nativescript-angular/router/ns-location-strategy";
44

5+
import { ViewContainerRefService } from "./shared/ViewContainerRefService";
6+
57
@Component({
68
selector: "ns-app",
79
templateUrl: "app.component.html",
810
})
911

1012
export class AppComponent {
11-
constructor(router: Router, location: NSLocationStrategy) {
13+
constructor(
14+
router: Router,
15+
location: NSLocationStrategy,
16+
private _vcRef: ViewContainerRef,
17+
private _viewContainerRefService: ViewContainerRefService) {
1218
router.events.subscribe(e => {
13-
// console.log("[ROUTER]: " + e.toString());
14-
1519
if (e instanceof NavigationEnd) {
1620
console.log("[ROUTER]: " + e.toString());
1721
console.log(location.toString());
1822
}
1923
});
24+
25+
this._viewContainerRefService.root = this._vcRef;
2026
}
2127
}

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

+19-4
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,13 @@ import { ModalSecondComponent } from "./modal-second/modal-second.component";
99
import { ModalComponent } from "./modal/modal.component";
1010
import { NestedModalComponent } from "./modal-nested/modal-nested.component";
1111
import { ModalRouterComponent } from "./modal/modal-router/modal-router.component";
12+
import { ModalViewComponent } from "./modal-shared/modal-view.component";
13+
import { ModalViewContentComponent } from "./modal-shared/modal-view-content.component";
14+
import { ModalSharedSecondComponent } from "./modal-shared/modal-shared-second.component";
15+
import { ViewContainerRefService } from "./shared/ViewContainerRefService";
1216

13-
import { enable as traceEnable, addCategories } from "tns-core-modules/trace";
14-
import { routerTraceCategory } from "nativescript-angular/trace";
17+
// import { enable as traceEnable, addCategories } from "tns-core-modules/trace";
18+
// import { routerTraceCategory } from "nativescript-angular/trace";
1519

1620
// addCategories(routerTraceCategory);
1721
// traceEnable();
@@ -24,15 +28,26 @@ import { routerTraceCategory } from "nativescript-angular/trace";
2428
NativeScriptModule,
2529
AppRoutingModule
2630
],
27-
entryComponents: [ModalRouterComponent, NestedModalComponent, ModalComponent],
31+
entryComponents: [
32+
ModalRouterComponent,
33+
NestedModalComponent,
34+
ModalComponent,
35+
ModalViewComponent
36+
],
2837
declarations: [
2938
AppComponent,
3039
HomeComponent,
3140
SecondComponent,
3241
ModalComponent,
3342
NestedModalComponent,
3443
ModalRouterComponent,
35-
ModalSecondComponent
44+
ModalSecondComponent,
45+
ModalViewComponent,
46+
ModalViewContentComponent,
47+
ModalSharedSecondComponent
48+
],
49+
providers: [
50+
ViewContainerRefService
3651
],
3752
schemas: [
3853
NO_ERRORS_SCHEMA

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

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { NgModule } from "@angular/core";
22
import { NativeScriptRouterModule } from "nativescript-angular/router";
3-
import { Routes, ChildrenOutletContexts } from "@angular/router";
3+
import { Routes } from "@angular/router";
44

55
import { HomeComponent } from "./home/home.component";
66
import { SecondComponent } from "./second/second.component";
77
import { ModalSecondComponent } from "./modal-second/modal-second.component";
88
import { ModalComponent } from "./modal/modal.component";
99
import { NestedModalComponent } from "./modal-nested/modal-nested.component";
10-
import { ModalRouterComponent } from "./modal/modal-router/modal-router.component";
10+
import { ModalViewContentComponent } from "./modal-shared/modal-view-content.component";
11+
import { ModalSharedSecondComponent } from "./modal-shared/modal-shared-second.component";
1112

1213
const routes: Routes = [
1314
{ path: "", redirectTo: "/home", pathMatch: "full" },
@@ -28,6 +29,12 @@ const routes: Routes = [
2829
},
2930
{ path: "modal-second", component: ModalSecondComponent }
3031
]
32+
},
33+
{
34+
path: "modal-shared", component: ModalViewContentComponent, outlet: "modalOutlet"
35+
},
36+
{
37+
path: "modal-shared-second-host", component: ModalSharedSecondComponent
3138
}
3239
];
3340

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

+3
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,7 @@
99
<Button text="Reset Frame Root View" (tap)="onFrameRootViewReset()"></Button>
1010
<Button text="Reset Tab Root View"></Button>
1111
<Button text="Reset Layout Root View"></Button>
12+
<Button text="show shared modal" (tap)="onRootModalTap()"></Button>
13+
<Button text="go to second (to open shared modal)" [nsRouterLink]="['/modal-shared-second-host']"></Button>
14+
<Label text="home component" verticalAlignment="bottom"></Label>
1215
</StackLayout>

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

+22-5
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,24 @@
11
import { Component, ViewContainerRef } from "@angular/core";
22
import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs";
3+
import { RouterExtensions } from "nativescript-angular/router";
34
import { EventData } from "tns-core-modules/data/observable";
4-
import { Frame } from "tns-core-modules/ui/frame";
5-
import { View } from "tns-core-modules/ui/core/view";
5+
6+
import { ViewContainerRefService } from "../shared/ViewContainerRefService";
67
import { ModalRouterComponent } from "../modal/modal-router/modal-router.component";
7-
import { PageRouterOutlet } from "nativescript-angular/router/page-router-outlet";
8-
import { RouterExtensions } from "nativescript-angular/router";
98
import { ModalComponent } from "../modal/modal.component";
9+
import { ModalViewComponent } from "../modal-shared/modal-view.component";
1010

1111
@Component({
1212
moduleId: module.id,
1313
selector: "home-page",
1414
templateUrl: "./home.component.html"
1515
})
1616
export class HomeComponent {
17-
constructor(private modal: ModalDialogService, private vcRef: ViewContainerRef, private routerExtension: RouterExtensions) { }
17+
constructor(
18+
private modal: ModalDialogService,
19+
private vcRef: ViewContainerRef,
20+
private viewContainerRefService: ViewContainerRefService,
21+
private routerExtension: RouterExtensions) { }
1822

1923
onModalNoFrame(args: EventData) {
2024
const options: ModalDialogOptions = {
@@ -52,4 +56,17 @@ export class HomeComponent {
5256
onFrameRootViewReset(args: EventData) {
5357

5458
}
59+
60+
onRootModalTap(): void {
61+
const options: ModalDialogOptions = {
62+
viewContainerRef: this.viewContainerRefService.root,
63+
context: {},
64+
fullscreen: true
65+
};
66+
67+
this.modal.showModal(ModalViewComponent, options)
68+
.then((result: string) => {
69+
console.log(result);
70+
});
71+
}
5572
}

Diff for: ‎e2e/modal-navigation-ng/app/modal-shared/modal-shared-second.component.ts

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Component } from "@angular/core";
2+
import { ModalDialogOptions, ModalDialogService } from "nativescript-angular/modal-dialog";
3+
4+
import { ViewContainerRefService } from "../shared/ViewContainerRefService";
5+
import { ModalViewComponent } from "../modal-shared/modal-view.component";
6+
import { RouterExtensions } from "nativescript-angular/router";
7+
8+
@Component({
9+
selector: "ns-second",
10+
moduleId: module.id,
11+
template: `
12+
<StackLayout class="page">
13+
<Button text="show shared modal" (tap)="onRootModalTap()"></Button>
14+
<Button text="go back" (tap)="onBackTap()"></Button>
15+
<Label text="second component"></Label>
16+
</StackLayout>
17+
`
18+
})
19+
export class ModalSharedSecondComponent {
20+
constructor(
21+
private _modalService: ModalDialogService,
22+
private _viewContainerRefService: ViewContainerRefService,
23+
private _routerExtensions: RouterExtensions
24+
) { }
25+
26+
onRootModalTap(): void {
27+
const options: ModalDialogOptions = {
28+
viewContainerRef: this._viewContainerRefService.root,
29+
context: {},
30+
fullscreen: true
31+
};
32+
33+
this._modalService.showModal(ModalViewComponent, options)
34+
.then((result: string) => {
35+
console.log(result);
36+
});
37+
}
38+
39+
onBackTap() {
40+
if (this._routerExtensions.canGoBack()) {
41+
this._routerExtensions.back();
42+
}
43+
}
44+
}

Diff for: ‎e2e/modal-navigation-ng/app/modal-shared/modal-view-content.component.ts

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Component } from "@angular/core";
2+
import { ModalDialogParams } from "nativescript-angular/modal-dialog";
3+
4+
@Component({
5+
selector: "ModalViewContent",
6+
moduleId: module.id,
7+
template: `
8+
<ActionBar title="SHARED MODAL VIEW" class="action-bar">
9+
</ActionBar>
10+
11+
<StackLayout class="page">
12+
<Button text="close modal" (tap)="onTap()"></Button>
13+
</StackLayout>
14+
`,
15+
styles: [`
16+
.action-bar, .page {
17+
background-color: chocolate;
18+
}
19+
`]
20+
})
21+
export class ModalViewContentComponent {
22+
constructor(private _params: ModalDialogParams) { }
23+
24+
onTap(): void {
25+
this._params.closeCallback("return value");
26+
}
27+
}

Diff for: ‎e2e/modal-navigation-ng/app/modal-shared/modal-view.component.ts

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Component, OnInit } from "@angular/core";
2+
import { RouterExtensions } from "nativescript-angular/router";
3+
4+
@Component({
5+
selector: "ModalView",
6+
moduleId: module.id,
7+
template:`
8+
<page-router-outlet name="modalOutlet"></page-router-outlet>
9+
`
10+
})
11+
export class ModalViewComponent implements OnInit {
12+
constructor(private _routerExtensions: RouterExtensions) {}
13+
14+
ngOnInit(): void {
15+
this._routerExtensions.navigate([{ outlets: { modalOutlet: ["modal-shared"]}}]);
16+
}
17+
}

Diff for: ‎e2e/modal-navigation-ng/app/shared/ViewContainerRefService.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Injectable, ViewContainerRef } from "@angular/core";
2+
3+
@Injectable()
4+
export class ViewContainerRefService {
5+
private _rootViewContainerRef: ViewContainerRef;
6+
7+
get root():ViewContainerRef {
8+
return this._rootViewContainerRef;
9+
}
10+
11+
set root(viewContainerRef: ViewContainerRef) {
12+
this._rootViewContainerRef = viewContainerRef;
13+
}
14+
}

0 commit comments

Comments
 (0)