Skip to content

Commit b861099

Browse files
bennadelbennadel
committed
Add param inheritance strategy for angular 6.
1 parent 70ac432 commit b861099

38 files changed

+10979
-1
lines changed

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
config.codekit
1+
.DS_Store
2+
config.codekit

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Accessing Parent Route Params Via paramsInheritanceStrategy In Angular 6.0.7](http://bennadel.github.io/JavaScript-Demos/demos/router-param-inheritance-angular6/)
1314
* [Collecting Route Params Across All Router Segments In Angular 6.0.7](http://bennadel.github.io/JavaScript-Demos/demos/router-global-param-collection-angular6/)
1415
* [Automatically Scroll The Window When The User Approaches The Viewport Edge In JavaScript](http://bennadel.github.io/JavaScript-Demos/demos/window-edge-scrolling/)
1516
* [Enable Tabbing Within A Fenced Code-Block Inside A Markdown Textarea In JavaScript](http://bennadel.github.io/JavaScript-Demos/demos/fenced-code-block-tabbing/)

‎demos/router-param-inheritance-angular6/.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
# Now that we're using Webpack, we can install modules locally and just ignore
3+
# them since the assets are baked into the compiled modules.
4+
node_modules/

‎demos/router-param-inheritance-angular6/app/app.component.less

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
2+
:host {
3+
display: block ;
4+
font-size: 18px ;
5+
padding: 50px 0px 0px 0px ;
6+
}
7+
8+
.nav {
9+
background-color: #F0F0F0 ;
10+
border-bottom: 2px solid #999999 ;
11+
box-sizing: border-box ;
12+
display: flex ;
13+
height: 50px ;
14+
line-height: 50px ;
15+
justify-content: center ;
16+
left: 0px ;
17+
position: fixed ;
18+
right: 0px ;
19+
top: 0px ;
20+
21+
&__item {
22+
padding: 0px 17px 0px 17px ;
23+
24+
&:hover {
25+
background-color: gold ;
26+
}
27+
28+
&--version {
29+
color: #999999 ;
30+
cursor: pointer ;
31+
text-decoration: underline ;
32+
}
33+
}
34+
}
35+
36+
h1 {
37+
text-align: center ;
38+
}

‎demos/router-param-inheritance-angular6/app/app.component.ts

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
2+
// Import the core angular services.
3+
import { Component } from "@angular/core";
4+
import { Params } from "@angular/router";
5+
6+
// Import the application components and services.
7+
import { RouterParams } from "./router-params";
8+
9+
// ----------------------------------------------------------------------------------- //
10+
// ----------------------------------------------------------------------------------- //
11+
12+
@Component({
13+
selector: "my-app",
14+
styleUrls: [ "./app.component.less" ],
15+
template:
16+
`
17+
<div class="nav">
18+
<a routerLink="/app" class="nav__item">Home</a>
19+
<a routerLink="/app/primary/1" class="nav__item">Primary</a>
20+
21+
<a [routerLink]="[ '/app', { outlets: { secondary: 'secondary/2' } } ]" class="nav__item">Secondary</a>
22+
<a [routerLink]="[ '/app', { outlets: { tertiary: 'tertiary/3' } } ]" class="nav__item">Tertiary</a>
23+
24+
<a (click)="useVersion( 'emptyOnly' )" class="nav__item nav__item--version">?emptyOnly</a>
25+
<a (click)="useVersion( 'always' )" class="nav__item nav__item--version">?always</a>
26+
</div>
27+
28+
<h1>
29+
Accessing Parent Route Params Via paramsInheritanceStrategy In Angular 6.0.7
30+
</h1>
31+
32+
<router-outlet></router-outlet>
33+
<router-outlet name="secondary"></router-outlet>
34+
<router-outlet name="tertiary"></router-outlet>
35+
`
36+
})
37+
export class AppComponent {
38+
39+
// I initialize the app-component.
40+
constructor( routerParams: RouterParams ) {
41+
42+
// The RouteParams service aggregates the params across all segments. When the
43+
// router state changes, the "params" stream is updated with the new values.
44+
routerParams.params.subscribe(
45+
( params: Params ) : void => {
46+
47+
console.group( "All Router Params" );
48+
console.table( params );
49+
console.groupEnd();
50+
51+
}
52+
);
53+
54+
}
55+
56+
// ---
57+
// PUBLIC METHODS.
58+
// ---
59+
60+
// I switch to a different version of the "paramsInheritanceStrategy" option in the
61+
// Router module.
62+
// --
63+
// * emptyOnly (the default)
64+
// * always
65+
// --
66+
public useVersion( version: string ) : void {
67+
68+
var url = window.location;
69+
70+
url.href = `${ url.pathname }?${ version }${ url.hash }`;
71+
72+
}
73+
74+
}

‎demos/router-param-inheritance-angular6/app/app.module.ts

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
2+
// Import the core angular services.
3+
import { BrowserModule } from "@angular/platform-browser";
4+
import { NgModule } from "@angular/core";
5+
import { RouterModule } from "@angular/router";
6+
import { Routes } from "@angular/router";
7+
8+
// Import the application components and services.
9+
import { AppComponent } from "./app.component";
10+
import { PrimaryDetailViewComponent } from "./views/primary-detail-view.component";
11+
import { PrimaryListViewComponent } from "./views/primary-list-view.component";
12+
import { PrimaryViewComponent } from "./views/primary-view.component";
13+
import { SecondaryDetailViewComponent } from "./views/secondary-detail-view.component";
14+
import { SecondaryListViewComponent } from "./views/secondary-list-view.component";
15+
import { SecondaryViewComponent } from "./views/secondary-view.component";
16+
import { TertiaryDetailViewComponent } from "./views/tertiary-detail-view.component";
17+
import { TertiaryListViewComponent } from "./views/tertiary-list-view.component";
18+
import { TertiaryViewComponent } from "./views/tertiary-view.component";
19+
20+
// ----------------------------------------------------------------------------------- //
21+
// ----------------------------------------------------------------------------------- //
22+
23+
var routes: Routes = [
24+
{
25+
path: "app",
26+
children: [
27+
{
28+
path: "primary/:primaryID",
29+
component: PrimaryViewComponent,
30+
children: [
31+
{
32+
path: "",
33+
pathMatch: "full",
34+
component: PrimaryListViewComponent
35+
},
36+
{
37+
path: "detail/:primaryDetailID",
38+
component: PrimaryDetailViewComponent
39+
}
40+
]
41+
},
42+
{
43+
outlet: "secondary",
44+
path: "secondary/:secondaryID",
45+
component: SecondaryViewComponent,
46+
children: [
47+
{
48+
path: "",
49+
pathMatch: "full",
50+
component: SecondaryListViewComponent
51+
},
52+
{
53+
path: "detail/:secondaryDetailID",
54+
component: SecondaryDetailViewComponent
55+
}
56+
]
57+
},
58+
{
59+
outlet: "tertiary",
60+
path: "tertiary/:tertiaryID",
61+
component: TertiaryViewComponent,
62+
children: [
63+
{
64+
path: "",
65+
pathMatch: "full",
66+
component: TertiaryListViewComponent
67+
},
68+
{
69+
path: "detail/:tertiaryDetailID",
70+
component: TertiaryDetailViewComponent
71+
}
72+
]
73+
}
74+
]
75+
},
76+
77+
// Redirect from the root to the "/app" prefix (this makes other features, like
78+
// secondary outlets easier to implement later on).
79+
{
80+
path: "",
81+
pathMatch: "full",
82+
redirectTo: "app"
83+
}
84+
];
85+
86+
// ----------------------------------------------------------------------------------- //
87+
// ----------------------------------------------------------------------------------- //
88+
89+
@NgModule({
90+
bootstrap: [
91+
AppComponent
92+
],
93+
imports: [
94+
BrowserModule,
95+
RouterModule.forRoot(
96+
routes,
97+
{
98+
// Tell the router to use the HashLocationStrategy.
99+
useHash: true,
100+
101+
// We're going to dynamically set the param-inheritance strategy based
102+
// on the state of the browser location. This way, the user can jump back
103+
// and forth between the two different modes.
104+
paramsInheritanceStrategy:
105+
location.search.startsWith( "?always" )
106+
? "always"
107+
: "emptyOnly"
108+
}
109+
)
110+
],
111+
declarations: [
112+
AppComponent,
113+
PrimaryDetailViewComponent,
114+
PrimaryListViewComponent,
115+
PrimaryViewComponent,
116+
SecondaryDetailViewComponent,
117+
SecondaryListViewComponent,
118+
SecondaryViewComponent,
119+
TertiaryDetailViewComponent,
120+
TertiaryListViewComponent,
121+
TertiaryViewComponent
122+
],
123+
providers: [
124+
// CAUTION: We don't need to specify the LocationStrategy because we are setting
125+
// the "useHash" property in the Router module above.
126+
// --
127+
// {
128+
// provide: LocationStrategy,
129+
// useClass: HashLocationStrategy
130+
// }
131+
]
132+
})
133+
export class AppModule {
134+
// ...
135+
}

‎demos/router-param-inheritance-angular6/app/main.htm

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Accessing Parent Route Params Via paramsInheritanceStrategy In Angular 6.0.7
8+
</title>
9+
</head>
10+
<body>
11+
12+
<!--
13+
Normally, in my demos, I put the H1 tag outside of the Angular application;
14+
however, due to the layout (with the top-navigation), I need to move the in-
15+
page H1 into the app module.
16+
-->
17+
<my-app>
18+
<p>
19+
<em>Loading files...</em>
20+
</p>
21+
22+
<p>
23+
npm Run Scripts:
24+
</p>
25+
26+
<ul>
27+
<li>
28+
<strong>npm run build</strong> &mdash; Compiles the .ts file into bundles.
29+
</li>
30+
<li>
31+
<strong>npm run watch</strong> &mdash; Compiles the .ts file into bundles and then watches files for changes.
32+
</li>
33+
</ul>
34+
</my-app>
35+
36+
</body>
37+
</html>

‎demos/router-param-inheritance-angular6/app/main.polyfill.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
// Import these libraries for their side-effects.
3+
import "core-js/client/shim.min.js";
4+
import "zone.js/dist/zone.js";

‎demos/router-param-inheritance-angular6/app/main.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
// Import the core angular services.
3+
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
4+
5+
// Import the root module for bootstrapping.
6+
import { AppModule } from "./app.module";
7+
8+
platformBrowserDynamic().bootstrapModule( AppModule );

‎demos/router-param-inheritance-angular6/app/main.vendor.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
2+
// Import these libraries for their side-effects.
3+
// --
4+
// CAUTION: As you add more "import" statements to your application code, you will have
5+
// to come back to this file and add those imports here as well (otherwise that imported
6+
// content may get bundled with your main application bundle, not your vendor bundle.
7+
// import "@angular/common/http";
8+
import "@angular/core";
9+
// import "@angular/platform-browser/animations";
10+
import "@angular/platform-browser-dynamic";
11+
import "@angular/router";
12+
import "rxjs";

0 commit comments

Comments
 (0)