Angular ngOnInit（）和ngOnChanges（）有什么区别？

Question

Angular默认提供生命周期钩子ngOnInit（）和ngOnChanges（）。 如果我们已经有ngOnChanges，为什么要使用ngOnInit？还有构造函数。

Answer 1

保持简短。

ngOnInit()用于执行任何一段代码（例如：加载时的数据获取）。

ngOnChanges()将在每次@Input()属性更改时执行。

如果要根据@Input()值更改执行任何组件方法，则应在ngOnChanges()内编写此类逻辑。

当您声明为什么我们ngOnInit()时需要ngOnChanges(),，这是因为您无法在每次@Input()属性更改时执行一次代码。而且您也不能使用constructor替代ngOnInit()。因为那不是角度生命周期钩子的一部分。

我认为你会对这个Diff between OnInit and constructor

有所了解

Answer 2

如何设置表单

<强> 0。静态设计 Html标记应该包含设计的结构和布局。任何永久类都将直接应用于标记。

<强> 1。构造

设置依赖项，例如服务，提供程序，配置等。这些使组件能够自我管理以及与其他元素交互。

<强> 2。初始化程序（ngOnInit）

当要从外部源检索其值而不是在设计时知道时，填充表单元素（如下拉列表等）。这只需要设置一次以设置表单的初始呈现

第3。输入更改（ngOnChanges）

对任何输入的每次更改运行，并执行由该特定控件触发的任何操作。例如，如果有多个输入并且在单个输入上有任何验证失败，您需要关注失败的控件并禁用所有其他控件，您可以在此处执行此操作。对验证逻辑很有用。

不得用于处理其他控件的布局和结构。

如果一个控件影响其他控件，则通常会递归运行，因此必须仔细设计逻辑。

如果您想阻止它运行，您可以禁用角度变化检测并自行手动处理状态。

<强> 4。控制事件处理程序 在这里，您可以获取控件的最终值，并使用它来执行窗体中其他控件的操作。只要更改其他控件的值，ngOnChanges事件就会再次触发。

Answer 3

当通过父级对组件输入进行更改时，将在生命周期挂钩上首先调用ngOnChanges。

在第一次调用ngOnChanges后初始化组件时，只会调用一次ngOnInit。

Answer 4

只要组件的输入绑定属性发生变化，就会调用

ngOnChanges（），它会收到一个名为SimpleChanges的对象，其中包含已更改的属性和之前的属性。

ngOnInit（）用于初始化组件中的内容，与ngOnChanges（）不同，它仅在ngOnChanges（）之后被调用一次。

Answer 5

ngOnInit和ngOnChanges是属于组件生命周期方法组的函数，它们在组件的不同时刻执行（这就是命名生命周期的原因）。这是所有这些的列表：