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 3332ca2

Browse files
fix: clean up properly shared modal page router outlets (#1360)
1 parent b8c652a commit 3332ca2

15 files changed

+383
-83
lines changed
Lines changed: 10 additions & 4 deletions
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
}

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

Lines changed: 19 additions & 4 deletions
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

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

Lines changed: 9 additions & 2 deletions
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

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

Lines changed: 3 additions & 0 deletions
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>

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

Lines changed: 22 additions & 5 deletions
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
}
Lines changed: 44 additions & 0 deletions
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+
}
Lines changed: 27 additions & 0 deletions
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+
}
Lines changed: 17 additions & 0 deletions
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+
}
Lines changed: 14 additions & 0 deletions
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)

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