Add param inheritance strategy for angular 6.

.gitignore

@@ -1 +1,2 @@
-config.codekit
+.DS_Store
+config.codekit

README.md

@@ -10,6 +10,7 @@ with.
 
 ## My JavaScript Demos - I Love JavaScript!
 
+* [Accessing Parent Route Params Via paramsInheritanceStrategy In Angular 6.0.7](http://bennadel.github.io/JavaScript-Demos/demos/router-param-inheritance-angular6/)
 * [Collecting Route Params Across All Router Segments In Angular 6.0.7](http://bennadel.github.io/JavaScript-Demos/demos/router-global-param-collection-angular6/)
 * [Automatically Scroll The Window When The User Approaches The Viewport Edge In JavaScript](http://bennadel.github.io/JavaScript-Demos/demos/window-edge-scrolling/)
 * [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

@@ -0,0 +1,4 @@
+
+# Now that we're using Webpack, we can install modules locally and just ignore 
+# them since the assets are baked into the compiled modules.
+node_modules/

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

@@ -0,0 +1,38 @@
+
+:host {
+	display: block ;
+	font-size: 18px ;
+	padding: 50px 0px 0px 0px ;
+}
+
+.nav {
+	background-color: #F0F0F0 ;
+	border-bottom: 2px solid #999999 ;
+	box-sizing: border-box ;
+	display: flex ;
+	height: 50px ;
+	line-height: 50px ;
+	justify-content: center ;
+	left: 0px ;
+	position: fixed ;
+	right: 0px ;
+	top: 0px ;
+
+	&__item {
+		padding: 0px 17px 0px 17px ;
+
+		&:hover {
+			background-color: gold ;
+		}
+
+		&--version {
+			color: #999999 ;
+			cursor: pointer ;
+			text-decoration: underline ;
+		}
+	}
+}
+
+h1 {
+	text-align: center ;
+}

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

@@ -0,0 +1,74 @@
+
+// Import the core angular services.
+import { Component } from "@angular/core";
+import { Params } from "@angular/router";
+
+// Import the application components and services.
+import { RouterParams } from "./router-params";
+
+// ----------------------------------------------------------------------------------- //
+// ----------------------------------------------------------------------------------- //
+
+@Component({
+	selector: "my-app",
+	styleUrls: [ "./app.component.less" ],
+	template:
+	`
+		<div class="nav">
+			<a routerLink="/app" class="nav__item">Home</a>
+			<a routerLink="/app/primary/1" class="nav__item">Primary</a>
+
+			<a [routerLink]="[ '/app', { outlets: { secondary: 'secondary/2' } } ]" class="nav__item">Secondary</a>
+			<a [routerLink]="[ '/app', { outlets: { tertiary: 'tertiary/3' } } ]" class="nav__item">Tertiary</a>
+
+			<a (click)="useVersion( 'emptyOnly' )" class="nav__item nav__item--version">?emptyOnly</a>
+			<a (click)="useVersion( 'always' )" class="nav__item nav__item--version">?always</a>
+		</div>
+
+		<h1>
+			Accessing Parent Route Params Via paramsInheritanceStrategy In Angular 6.0.7
+		</h1>
+
+		<router-outlet></router-outlet>
+		<router-outlet name="secondary"></router-outlet>
+		<router-outlet name="tertiary"></router-outlet>
+	`
+})
+export class AppComponent {
+
+	// I initialize the app-component.
+	constructor( routerParams: RouterParams ) {
+
+		// The RouteParams service aggregates the params across all segments. When the
+		// router state changes, the "params" stream is updated with the new values.
+		routerParams.params.subscribe(
+			( params: Params ) : void => {
+
+				console.group( "All Router Params" );
+				console.table( params );
+				console.groupEnd();
+
+			}
+		);
+
+	}
+
+	// ---
+	// PUBLIC METHODS.
+	// ---
+
+	// I switch to a different version of the "paramsInheritanceStrategy" option in the
+	// Router module.
+	// --
+	// * emptyOnly (the default)
+	// * always
+	// --
+	public useVersion( version: string ) : void {
+
+		var url = window.location;
+
+		url.href = `${ url.pathname }?${ version }${ url.hash }`;
+
+	}
+
+}

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

@@ -0,0 +1,135 @@
+
+// Import the core angular services.
+import { BrowserModule } from "@angular/platform-browser";
+import { NgModule } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { Routes } from "@angular/router";
+
+// Import the application components and services.
+import { AppComponent } from "./app.component";
+import { PrimaryDetailViewComponent } from "./views/primary-detail-view.component";
+import { PrimaryListViewComponent } from "./views/primary-list-view.component";
+import { PrimaryViewComponent } from "./views/primary-view.component";
+import { SecondaryDetailViewComponent } from "./views/secondary-detail-view.component";
+import { SecondaryListViewComponent } from "./views/secondary-list-view.component";
+import { SecondaryViewComponent } from "./views/secondary-view.component";
+import { TertiaryDetailViewComponent } from "./views/tertiary-detail-view.component";
+import { TertiaryListViewComponent } from "./views/tertiary-list-view.component";
+import { TertiaryViewComponent } from "./views/tertiary-view.component";
+
+// ----------------------------------------------------------------------------------- //
+// ----------------------------------------------------------------------------------- //
+
+var routes: Routes = [
+	{
+		path: "app",
+		children: [
+			{
+				path: "primary/:primaryID",
+				component: PrimaryViewComponent,
+				children: [
+					{
+						path: "",
+						pathMatch: "full",
+						component: PrimaryListViewComponent
+					},
+					{
+						path: "detail/:primaryDetailID",
+						component: PrimaryDetailViewComponent
+					}
+				]
+			},
+			{
+				outlet: "secondary",
+				path: "secondary/:secondaryID",
+				component: SecondaryViewComponent,
+				children: [
+					{
+						path: "",
+						pathMatch: "full",
+						component: SecondaryListViewComponent
+					},
+					{
+						path: "detail/:secondaryDetailID",
+						component: SecondaryDetailViewComponent
+					}
+				]
+			},
+			{
+				outlet: "tertiary",
+				path: "tertiary/:tertiaryID",
+				component: TertiaryViewComponent,
+				children: [
+					{
+						path: "",
+						pathMatch: "full",
+						component: TertiaryListViewComponent
+					},
+					{
+						path: "detail/:tertiaryDetailID",
+						component: TertiaryDetailViewComponent
+					}
+				]
+			}
+		]
+	},
+
+	// Redirect from the root to the "/app" prefix (this makes other features, like 
+	// secondary outlets easier to implement later on).
+	{
+		path: "",
+		pathMatch: "full",
+		redirectTo: "app"
+	}
+];
+
+// ----------------------------------------------------------------------------------- //
+// ----------------------------------------------------------------------------------- //
+
+@NgModule({
+	bootstrap: [
+		AppComponent
+	],
+	imports: [
+		BrowserModule,
+		RouterModule.forRoot(
+			routes,
+			{
+				// Tell the router to use the HashLocationStrategy.
+				useHash: true,
+
+				// We're going to dynamically set the param-inheritance strategy based
+				// on the state of the browser location. This way, the user can jump back
+				// and forth between the two different modes.
+				paramsInheritanceStrategy: 
+					location.search.startsWith( "?always" )
+						? "always"
+						: "emptyOnly"
+			}
+		)
+	],
+	declarations: [
+		AppComponent,
+		PrimaryDetailViewComponent,
+		PrimaryListViewComponent,
+		PrimaryViewComponent,
+		SecondaryDetailViewComponent,
+		SecondaryListViewComponent,
+		SecondaryViewComponent,
+		TertiaryDetailViewComponent,
+		TertiaryListViewComponent,
+		TertiaryViewComponent
+	],
+	providers: [
+		// CAUTION: We don't need to specify the LocationStrategy because we are setting
+		// the "useHash" property in the Router module above.
+		// --
+		// {
+		// 	provide: LocationStrategy,
+		// 	useClass: HashLocationStrategy
+		// }
+	]
+})
+export class AppModule {
+	// ...
+}

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

@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8" />
+
+	<title>
+		Accessing Parent Route Params Via paramsInheritanceStrategy In Angular 6.0.7
+	</title>
+</head>
+<body>
+
+	<!--
+		Normally, in my demos, I put the H1 tag outside of the Angular application;
+		however, due to the layout (with the top-navigation), I need to move the in-
+		page H1 into the app module.
+	-->
+	<my-app>
+		<p>
+			<em>Loading files...</em>
+		</p>
+
+		<p>
+			npm Run Scripts:
+		</p>
+
+		<ul>
+			<li>
+				<strong>npm run build</strong> &mdash; Compiles the .ts file into bundles.
+			</li>
+			<li>
+				<strong>npm run watch</strong> &mdash; Compiles the .ts file into bundles and then watches files for changes.
+			</li>
+		</ul>
+	</my-app>
+
+</body>
+</html>

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

@@ -0,0 +1,4 @@
+
+// Import these libraries for their side-effects.
+import "core-js/client/shim.min.js";
+import "zone.js/dist/zone.js";

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

@@ -0,0 +1,8 @@
+
+// Import the core angular services.
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+
+// Import the root module for bootstrapping.
+import { AppModule } from "./app.module";
+
+platformBrowserDynamic().bootstrapModule( AppModule );

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

@@ -0,0 +1,12 @@
+
+// Import these libraries for their side-effects.
+// --
+// CAUTION: As you add more "import" statements to your application code, you will have
+// to come back to this file and add those imports here as well (otherwise that imported
+// content may get bundled with your main application bundle, not your vendor bundle.
+// import "@angular/common/http";
+import "@angular/core";
+// import "@angular/platform-browser/animations";
+import "@angular/platform-browser-dynamic";
+import "@angular/router";
+import "rxjs";