Angular 组件继承。 parent的生命周期钩子如何执行？

Question

所以我有 BaseComponent 并且许多孩子扩展了它：

export class Child1Component extends BaseComponent implements OnInit, AfterViewInit

Child1Component没有调用super.ngAfterViewInit()，但是由于某种原因BaseComponent AfterViewInit被执行了。我只是安慰它日志：

ngAfterViewInit() {
  console.log('BaseComponent AfterViewInit')
}

这怎么可能？除了super.ngAfterViewInit()还有什么可以调用parent的生命周期钩子？

这会不会只在开发模式下发生？

Answer 1

我认为这是正常的 OOP 继承行为。如果您没有在子组件上显式定义 ngAfterViewInit，则此组件将具有该方法的父实现可用。

因此，在组件生命周期中，当 angular 检查 ngAfterViewInit 方法是否在子组件上可用时，答案是肯定的：子组件实现了该方法，但它是继承的来自父组件

Answer 2

来自Docs：

ngAfterViewInit()

Respond after Angular initializes the component's views and child views / the view that a directive is in.

Called once after the first ngAfterContentChecked().

如您所见，这是 ngAfterViewInit()

情况下的正常行为

Answer 3

子组件将具有（固有的）所有基本组件 class 属性和方法 因此通常子组件 class 将具有 ngAfterViewInit 方法，这将运行 by angular ，如果你想覆盖这个方法，只需在子 class 上重新创建它，这将取代基础中的方法class ，但即使您可以使用 super 关键字

访问基础 class

export class Child1Component extends BaseComponent implements OnInit, AfterViewInit {

  ngAfterViewInit() {
    super.ngAfterViewInit(); //  call base ngAfterViewInit method  
    console.log('Child1Component AfterViewInit');
  }

}

ngAfterViewInit is special method it one of lifecycle hooks a method run and manage by angular , read more about this here

Angular 组件继承。 parent的生命周期钩子如何执行？

Angular component inheritance. How parent's life cycle hooks can be executed?

angular

typescript

prototypal-inheritance