Component code not called after navigation in Angular 4

Question

I'm trying to implement error handler using Angular 5.0.0.

In the error handler implementing ErrorHandler interface I change the current route to the error component route:

router.navigate(['/error'], {queryParams: errorWithContextInfo});

The URL in the browser bar changes, the component HTML is displayed, constructor is called, onInit is not called, the member variables are not accessible in the view (always empty, even when they are public and have default value).

Then, when I hit F5, error route is loaded properly, all member variables changed in the constructor on onInit hook are accessible in the view as expected.

How can I fix this behavior? (queryParams should be accessible in the component view right after navigation).

score 1 · Accepted Answer · answered May 01 '18 at 07:11

You can force change detection when navigation completes using NgZone.

Inject it in the constructor:

import {NgZone} from '@angular/core';
import {Router} from '@angular/router';
constructor(private router: Router, private zone: NgZone) {}

then call the navigation action like this:

this.zone.run(() => router.navigate(['/error'], {queryParams: params}));

See Angular 2 ngOnInit not called and this issue for details.

Component code not called after navigation in Angular 4

1 Answers1