从子级到父级不调用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进行尝试。