7

Angular 默认提供生命周期钩子 ngOnInit() 和 ngOnChanges()。如果我们已经有一个 ngOnChanges,为什么还要使用 ngOnInit?还有构造函数。

4

5 回答 5

18

保持非常简短。

ngOnInit()用于仅执行一次任何一段代码(例如:加载时获取数据)。

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

如果你想根据@Input()值的变化来执行任何组件方法,那么你应该在里面写这样的逻辑ngOnChanges()

ngOnInit()正如您所说,我们为什么需要它是因为您无法在每次属性更改ngOnChanges(),时执行一次代码。@Input()而且您也不能constructor用作替代品ngOnInit()。因为绑定,例如 @Input 属性在构造函数中不可用。

我认为您会对OnInit 和构造函数之间的这个 Diff有一个公平的想法

于 2018-06-08T05:05:46.397 回答
11

如何设置表单

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

1.构造函数

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

2.初始化器(ngOnInit)

当要从外部源检索它们的值而不是在设计时已知时,填充表单元素(如下拉列表等)。这仅用于设置表单的初始呈现

3.输入变化(ngOnChanges)

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

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

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

如果您想阻止它运行,您可以禁用 Angular 更改检测并自己手动处理状态。

4. 控件的事件处理程序 在这里,您获取控件的最终值并使用它来执行对表单中其他控件的操作。只要您更改其他控件的值,ngOnChanges 事件就会再次触发。

于 2018-06-08T05:58:23.557 回答
9

ngOnInit 和 ngOnChanges 是属于组件生命周期方法组的函数,它们在我们组件的不同时刻执行(这就是为什么命名生命周期)。这是所有这些的列表:

在此处输入图像描述

于 2019-05-28T15:34:01.677 回答
1

每当其组件的输入绑定属性发生更改时,都会调用 ngOnChanges(),它会接收一个名为 SimpleChanges 的对象,该对象包含已更改的属性和先前的属性。

ngOnInit() 用于初始化组件中的事物,与 ngOnChanges() 不同,它仅在第一个 ngOnChanges() 之后调用一次。

于 2018-06-08T05:05:50.817 回答
1

当通过父组件输入发生更改时,将首先在生命周期挂钩上调用 ngOnChanges。

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

于 2018-06-08T05:05:57.513 回答