Angular 2中OnChanges和DoCheck有什么区别？

Question

他们之间的差异似乎让我很困惑.它们之间有什么区别,确切地说它们被称为

Answer 1

• ngOnChanges()OnChanges当绑定到输入的值发生更改时,将调用(),以便在输入更改时运行自定义代码.

• ngDoCheck()(DoCheck)在更改检测运行时调用,以便您可以实现自定义更改检测操作.

Answer 2

我正在玩这两个,发现了一些值得分享的有趣内容:

ngDoCheck():

每次调用一个Zone挂钩时都会调用它,

怎么样？

Angular2使用NgZone,正如@Gunter所说,猴子修补了浏览器中的所有异步事件,你可以想到它;

var originalTimeout = window.setTimeout;
window.setTimeout = function(callback,time) {
    originalTimeout(callback,time);

    // notify Angular that a setTimeout is fired
    // e.g run ngDoCheck() for components
}

因此,每次运行时setTimeout,您实际上都在调用上面的函数,这是猴子修补原始函数setTimeout.

免责声明:上面的代码是完全抽象的,在Zonejs中你不会发现它,但我只是想以某种方式显示当它们说"Zone修补了所有异步函数并在其中有钩子"时的含义;

无论如何,所以每当你运行一个setTimeout(或任何其他异步函数)时,它ngDoCheck都会被调用.

所以它意味着角度只是检查模型或任何@inputs是否有变化.

什么时候方便？

ngDoCheck如果你的组件ChangeDetectionStrategy是OnPush 就变得很方便,这意味着如果任何@Inputs引用被更改,它只会更新视图.

在某些情况下,您希望使用OnPush但是您希望在每次检查时进行一些手动更新.

看看这个plunker.

你会发现,即使ChangeDetectionStrategy在的on-push-test部分是OnPush,当我们点击发生变异食物和变异的食物名单,我将运行markForCheck中的ngDoCheck和更新后的虚拟视图if状态.

所以这意味着,这个功能将被称为A LOT !!! 所以要小心你把它放在里面.

简而言之:

ngDoCheck :每次在应用程序中触发可能导致更改的事件时,都会调用此函数,但不一定被视为更改.

ngOnChanges

只有在任何@Inputs绑定中存在引用更改时,才会调用此方法,而不管ChangeDetectionStrategy组件是什么.

所以,如果我们像这样改变食物阵列:

this.foods.push({value: 'steak-3', viewValue: 'Fish'});

该ngOnChanges不会被调用,但如果我们更新这样的参考:

this.foods = [{value: 'steak-3', viewValue: 'Fish'}];

它会被调用.

Answer 3

首先感谢上述答案.我正在为我亲自面对的两个功能添加一个用例.

ngOnChanges() (OnChanges):检测按值传递的变量的更改

ngDoCheck() (DoCheck):检测通过引用传递的变量的更改,例如arrays,未ngOnChanges()作为旧值检测到的变量,并且新值具有相同的引用