【问题标题】:What is the difference between Angular ngOnInit() and ngOnChanges()?Angular ngOnInit() 和 ngOnChanges() 有什么区别?
【发布时间】:2018-11-18 02:25:11
【问题描述】:

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

【问题讨论】:

标签: angular typescript ngoninit ngonchanges


【解决方案1】:

保持简短。

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

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

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

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

我想你会通过这个Diff between OnInit and constructor得到公平的想法

【讨论】:

    【解决方案2】:

    如何设置表单

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

    1.构造函数

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

    2。初始化程序 (ngOnInit)

    当要从外部源检索它们的值而不是在设计时已知时,填充表单元素,如下拉列表等。只需执行一次以设置表单的初始呈现

    3.输入更改 (ngOnChanges)

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

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

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

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

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

    【讨论】:

      【解决方案3】:

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

      【讨论】:

        【解决方案4】:

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

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

        【讨论】:

          【解决方案5】:

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

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

          【讨论】:

            猜你喜欢
            • 2019-01-10
            • 2017-04-10
            • 2019-08-30
            • 2018-03-01
            • 2017-03-30
            • 1970-01-01
            • 1970-01-01
            • 2014-08-05
            • 1970-01-01
            相关资源
            最近更新 更多