從子級到父級不調用Angular 6 ngOninit

Question

請考慮以下設置：

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

因此，基於以上內容：

• / module1加載Module1Component
• / module1 / component1加載Component1Component
• / module1 / component1 / component2加載Component2Component

也

• Module1Component是Component1Component的父級
• Component1Component是Component2Component的父

Module1組件代碼

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');
    }
}

Component1組件代碼

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');
    }

}

Component2組件代碼

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');
    }

}

問題

鑒於這些鏈接：

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

• 當您位於/ module1 / component1 / component2上，並且未使用Component1Component的ngOnInit上方的routerLink轉到/ module1 / component1時 。

• 當您在/ module1 / component1上，並使用不調用Module1Component的ngOnInit上方的routerLink轉到/ module1時 。

結論 ：不會調用使用routerLink從子級到父級的ngOnInit，為什么以及如何對其進行配置？

注意 ：使用router.navigate或使用瀏覽器中的 “ 后退”按鈕時， 也會發生相同的行為。

Answer 1

導航到具有不同參數的相同組件時，不會調用ngOnInit的預期行為。

但是您不應該手動調用ngOnInit。

每次路由參數更改時，訂閱都會收到通知。 因此，subscribe方法中的代碼將每次執行。 您無需調用ngOnInit。

通過在route.params.subscribe中移動console.log進行嘗試。