View Components May Get Unnecessarily Reinstantiated Under Certain Circumstances In Angular 4.4.6

// Import the core angular services.
import { ActivatedRoute } from "@angular/router";
import { Component } from "@angular/core";
import { ParamMap } from "@angular/router";
import { Router } from "@angular/router";
import { Subscription } from "rxjs/Subscription";

// Import these modules for their side-effects.
import "rxjs/add/operator/delay";

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

@Component({
	selector: "child-component",
	styleUrls: [ "./child.component.less" ],
	template:
	`
		This is the <strong>Child</strong> component.
	`
})
export class ChildComponent {

	private activatedRoute: ActivatedRoute;
	private paramMapSubscription: Subscription;
	private router: Router;

	// I initialize the child-view component.
	constructor(
		activatedRoute: ActivatedRoute,
		router: Router
		) {

		this.activatedRoute = activatedRoute;
		this.router = router;

		console.group( "Child Component Instantiated." );

	}

	// ---
	// PUBLIC METHODS.
	// ---

	// I get called once when the component is being destroyed.
	public ngOnDestroy() : void {

		( this.paramMapSubscription ) && this.paramMapSubscription.unsubscribe();

		console.log( "ngOnDestroy() called." );
		console.groupEnd();

	}


	// I get called once, after the inputs have been bound for the first time.
	public ngOnInit() : void {

		this.activatedRoute.paramMap
			// CAUTION: Without the .delay(0) here, the component will be destroyed and
			// immediately re-created under certain circumstances (such as when hand
			// crafting a bad URL or by clicking on a bad HREF). As best I can GUESS,
			// there's some sort of RACE CONDITION when the navigation is performed too
			// close (timing-wise) to the execution of the ParamMap callback. To be
			// honest, I am not sure I fully understand what is going on....
			// --
			// .delay(0)
			// --
			.subscribe(
				( paramMap: ParamMap ) : void => {

					console.warn( "Param-map value:", paramMap.get( "id" ) );
					this.router.navigate( [ "/" ] );

				}
			)
		;

	}

}

// Import the core angular services.
import { Component } from "@angular/core";

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

@Component({
	selector: "my-app",
	styleUrls: [ "./app.component.less" ],
	template:
	`
		<ul>
			<li>
				<a [routerLink]="[ 'child', 1 ]">Show Child 1</a> &mdash; (Router Link Property)
			</li>
			<li>
				<a routerLink="./child/2">Show Child 2</a> &mdash; (Router Link Attribute)
			</li>
			<li>
				<a href="#/child/3">Show Child 3</a> &mdash; (Vanilla HREF)

				&mdash;
				<strong>This one has FUNKY behavior</strong>.

				Now, before you go and write this off as an invalid use-case, remember
				that this is the same as if I copy/paste a URL into the browser; or, if I
				manually manipuate the URL.
			</li>
		</ul>

		<router-outlet></router-outlet>
	`
})
export class AppComponent {
	// ...
}

// I get called once, after the inputs have been bound for the first time.
public ngOnInit() : void {

	console.log( "ngOnInit() called." );

	this.activatedRoute.paramMap
		// CAUTION: Without the .delay(0) here, the component will be destroyed and
		// immediately re-created under certain circumstances (such as when hand
		// crafting a bad URL or by clicking on a bad HREF). As best I can GUESS,
		// there's some sort of RACE CONDITION when the navigation is performed too
		// close (timing-wise) to the execution of the ParamMap callback. To be
		// honest, I am not sure I fully understand what is going on....
		// --
		// .delay(0)
		// --
		.subscribe(
			( paramMap: ParamMap ) : void => {

				console.warn( "Param-map value:", paramMap.get( "id" ) );

				// Only navigate away from the component if the route parameter is
				// not "1". This will allow us to navigate to the "1" parameters for
				// SEVERAL SECONDS before switching to "2". And, even though the
				// component has been rendered for several seconds, we still see the
				// strange behavior when navigating away using HREF or manually-
				// edited URLs.
				if ( paramMap.get( "id" ) !== "1" ) {

					this.router.navigate( [ "/" ] );

				}

			}
		)
	;

}