Angular 6 ngOninit not called going from child to parent

Question

Consider the following setup:

{ path: 'module1', component: Module1Component, children: [
    { path: 'component1', component: Component1Component, children: [
        { path: 'component2', component: Component2Component }
    ] }
] },

So based on the above:

• /module1 loads Module1Component
• /module1/component1 loads Component1Component
• /module1/component1/component2 loads Component2Component

Also

• Module1Component is the parent of Component1Component
• Component1Component is the parent of Component2Component

Module1Component Code

import { Component, OnInit } from "@angular/core";

@Component({
    selector: 'app-module1-component',
    templateUrl: './module1.component.html',
    styleUrls: ['./module1.component.css']
})
export class Module1Component implements OnInit {

    constructor() {}

    ngOnInit() {
        console.log('Module1Component');
    }
}

Component1Component Code

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-component1',
    templateUrl: './component1.component.html',
    styleUrls: ['./component1.component.css']
})
export class Component1Component implements OnInit {

    constructor() { }

    ngOnInit() {
        console.log('Component1Component');
    }

}

Component2Component Code

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-component2',
    templateUrl: './component2.component.html',
    styleUrls: ['./component2.component.css']
})
export class Component2Component implements OnInit {

    constructor() { }

    ngOnInit() {
        console.log('Component2Component');
    }

}

ISSUE

Given these links:

<a [routerLink]="['/module1']">/module1</a>
<a [routerLink]="['/module1/component1']">/module1/component1</a>
<a [routerLink]="['/module1/component1/component2']">/module1/component1/component2</a>

• When you are on /module1/component1/component2 and you go to /module1/component1 using the routerLink above the ngOnInit of Component1Component is not called .

• When you are on /module1/component1 and go to /module1 using the routerLink above the ngOnInit of Module1Component is not called .

Conclusion : The ngOnInit going from a child to a parent using routerLink is not called, why and how can it be configured to do so ?

NOTE : The same behavior occurs when using router.navigate or using the back button in the browser .

Answer 1

It is expected behavior that the ngOnInit is not called when navigating to the same component with different parameters.

But you should not call ngOnInit manually.

The subscription will get notified each time the route parameters change. So code within the subscribe method will execute each time. You don't need to call ngOnInit.

Try it by moving your console.log within the route.params.subscribe.