Collecting Route Params Across All Router Segments In Angular 6.0.7

// Import the core angular services.
import { ActivatedRouteSnapshot } from "@angular/router";
import { BehaviorSubject } from "rxjs";
import { Injectable } from "@angular/core";
import { Event as RouterEvent } from "@angular/router";
import { filter } from "rxjs/operators";
import { NavigationEnd } from "@angular/router";
import { Observable } from "rxjs";
import { Params } from "@angular/router";
import { pipe } from "rxjs";
import { Router } from "@angular/router";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

@Injectable({
	providedIn: "root"
})
export class RouterParams {

	public params: BehaviorSubject<Params>;
	public paramsSnapshot: Params;

	private router: Router;

	// I initialize the router params service.
	constructor( router: Router ) {

		this.router = router;

		this.paramsSnapshot = {};
		this.params = new BehaviorSubject( this.paramsSnapshot );

		// We will collection the params after every Router navigation event. However,
		// we're going to defer param aggregation until after the NavigationEnd event.
		// This should leave the Router in a predictable and steady state.
		// --
		// NOTE: Since the router events are already going to be triggering change-
		// detection, we probably don't have to take any precautions about whether or
		// not we subscribe to these events inside the Angular Zone.
		this.router.events
			.pipe(
				filter(
					( event: RouterEvent ) : boolean => {

						return( event instanceof NavigationEnd );

					}
				)
			)
			.subscribe(
				( event: NavigationEnd ) : void => {

					var snapshot = this.router.routerState.snapshot.root;
					var nextParams = this.collectParams( snapshot );

					// A Router navigation event can occur for a variety of reasons, such
					// as a change to the search-params. As such, we need to inspect the
					// params to see if the structure actually changed with this
					// navigation event. If not, we don't want to emit an event.
					if ( this.paramsAreDifferent( this.paramsSnapshot, nextParams ) ) {

						this.params.next( this.paramsSnapshot = nextParams );

					}

				}
			)
		;

	}

	// ---
	// PRIVATE METHODS.
	// ---

	// I collect the params from the given router snapshot tree.
	// --
	// CAUTION: All params are merged into a single object. This means that like-named
	// params in different tree nodes will collide and overwrite each other.
	private collectParams( root: ActivatedRouteSnapshot ) : Params {

		var params: Params = {};

		(function mergeParamsFromSnapshot( snapshot: ActivatedRouteSnapshot ) {

			Object.assign( params, snapshot.params );

			snapshot.children.forEach( mergeParamsFromSnapshot );

		})( root );

		return( params );

	}


	// I determine if the given param collections have a different [shallow] structure.
	private paramsAreDifferent(
		currentParams: Params,
	nextParams: Params
	) : boolean {

		var currentKeys = Object.keys( currentParams );
		var nextKeys = Object.keys( nextParams );

		// If the collection of keys in each set of params is different, then we know
		// that we have two unique collections.
		if ( currentKeys.length !== nextKeys.length ) {

			return( true );

		}

		// If the collections of keys have the same length then we have to start
		// comparing the individual KEYS and VALUES in each collection.
		for ( var i = 0, length = currentKeys.length ; i < length ; i++ ) {

			var key = currentKeys[ i ];

			// Compare BOTH the KEY and the VALUE. While this looks like it is comparing
			// the VALUE alone, it is implicitly comparing the KEY as well. If a key is
			// defined in one collection but not in the other collection, one of the
			// values will be read as "undefined". This "undefined" value implies that
			// either the KEY or the VALUE was different.
			if ( currentParams[ key ] !== nextParams[ key ] ) {

				return( true );

			}

		}

		// If we made it this far, there was nothing to indicate that the two param
		// collections are different.
		return( false );

	}

}

// .... truncated module file.
var routes: Routes = [
	{
		path: "app",
		children: [
			{
				path: "primary",
				component: PrimaryViewComponent,
				children: [
					{
						path: "",
						pathMatch: "full",
						component: PrimaryListViewComponent
					},
					{
						path: "detail/:primaryID",
						component: PrimaryDetailViewComponent
					}
				]
			},
			{
				outlet: "secondary",
				path: "secondary",
				component: SecondaryViewComponent,
				children: [
					{
						path: "",
						pathMatch: "full",
						component: SecondaryListViewComponent
					},
					{
						path: "detail/:secondaryID",
						component: SecondaryDetailViewComponent
					}
				]
			},
			{
				outlet: "tertiary",
				path: "tertiary",
				component: TertiaryViewComponent,
				children: [
					{
						path: "",
						pathMatch: "full",
						component: TertiaryListViewComponent
					},
					{
						path: "detail/:tertiaryID",
						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"
	}
];

// 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" class="nav__item">Primary</a>

			<a [routerLink]="[ '/app', { outlets: { secondary: 'secondary' } } ]" class="nav__item">Secondary</a>
			<a [routerLink]="[ '/app', { outlets: { tertiary: 'tertiary' } } ]" class="nav__item">Tertiary</a>
		</div>

		<h1>
			Collecting Route Params Across All Router Segments In Angular 6.0.7
		</h1>

		<p class="params">
			<strong>All Params:</strong> {{ params | json }}
		</p>

		<router-outlet></router-outlet>
		<router-outlet name="secondary"></router-outlet>
		<router-outlet name="tertiary"></router-outlet>
	`
})
export class AppComponent {

	public params: Params;

	// I initialize the app-component.
	constructor( routerParams: RouterParams ) {

		this.params = {};

		// 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 => {

				this.params = params;

				console.log( "Router Params have changed:" );
				console.table( params );

			}
		);

	}

}