构造函数

每个类都有构造函数，构造函数不是Angular特有的，而是从面向对象设计中派生出来的概念。构造函数创建组件类的实例。

OnInit

ngOnInit函数是Angular组件的生命周期方法之一。Angular组件中的生命周期方法(或钩子)允许你在组件生命的不同阶段运行一段代码。 与构造函数方法不同，ngOnInit方法来自Angular接口(OnInit)，组件需要实现该接口才能使用该方法。ngOnInit方法在组件创建后不久被调用。

在Angular生命周期中

1) Angular注入器检测构造函数参数和实例化类。

2)下一个角调用生命周期

Angular生命周期钩子

调用指令参数绑定。

开始角渲染…

调用具有角生命周期状态的其他方法。

第一个(构造函数)与类实例化有关，与Angular2无关。构造函数可以用在任何类上。您可以在其中放入一些新创建实例的初始化处理。

第二个对应于Angular2组件的生命周期钩子:

引用自angular官方网站:

当输入或输出绑定值发生变化时调用ngOnChanges 在第一个ngOnChanges之后调用ngOnInit

所以如果初始化处理依赖于组件的绑定(例如用@Input定义的组件参数)，你应该使用ngOnInit，否则构造函数就足够了…

constructor()是Component生命周期中的默认方法，用于依赖注入。构造函数是一个Typescript特性。

ngOnInit()在构造函数之后被调用，ngOnInit在第一个ngOnChanges之后被调用。

例如:

建设者()-> ngOnChanges() -> ngOnInit()

如上所述，当输入或输出绑定值发生变化时调用ngOnChanges()。

上面的答案并没有真正回答最初问题的这一方面:什么是生命周期钩子?我花了一段时间才明白这意味着什么，直到我这样想。

1)假设你的组件是一个人。人类的生命包括许多阶段，然后我们就会死去。

2)我们的人类组件可以有以下生命周期脚本:出生，婴儿，小学，青年，中年成人，老年人，死亡，处理。

3)假设你想有一个功能来创造孩子。为了避免这个问题变得复杂，并且相当滑稽，您希望您的函数只在人类组件生命的Young Adult阶段被调用。所以你开发了一个组件，它只在父母组件处于年轻成人阶段时才活跃。钩子通过发出生命阶段的信号并让组件对其进行操作来帮助您做到这一点。

有趣的东西。如果你让你的想象力去实际编码这样的东西，它会变得复杂而有趣。

我将添加一个重要的东西，在上面的解释中被跳过，并解释什么时候你必须使用ngOnInit。

如果你通过ViewChildren, ContentChildren或ElementRef对组件的DOM进行任何操作，你的原生元素在构造函数阶段将不可用。

然而，由于ngOnInit发生在组件被创建和检查(ngOnChanges)被调用之后，你可以在这一点上访问DOM。

export class App implements OnInit, AfterViewInit, AfterContentInit {
  @Input() myInput: string;
  @ViewChild() myTemplate: TemplateRef<any>;
  @ContentChild(ChildComponent) myComponent: ChildComponent; 

  constructor(private elementRef: ElementRef) {
     // this.elementRef.nativeElement is undefined here
     // this.myInput is undefined here
     // this.myTemplate is undefined here
     // this.myComponent is undefine here
  }

  ngOnInit() {
     // this.elementRef.nativeElement can be used from here on
     // value of this.myInput is passed from parent scope
     // this.myTemplate and this.myComponent are still undefined
  }
  ngAfterContentInit() {
     // this.myComponent now gets projected in and can be accessed
     // this.myTemplate is still undefined
  }

  ngAfterViewInit() {
     // this.myTemplate can be used now as well
  }
}