Question

我的组件有一个可变对象输入。当对象的属性发生变化时，组件的ngOnChanges不被调用。它很容易理解。但是它的显示正确地改变了。

我的组件hero-card：

export class HeroCardComponent  implements OnChanges , DoCheck {
    @Input()
    Hero: Hero;
    @Input()
    Title: string;
    ngOnChanges(changes: SimpleChanges) {
        for (const propName in changes) {
            const chng = changes[propName];
            const cur  = JSON.stringify(chng.currentValue);
            const prev = JSON.stringify(chng.previousValue);
            console.log(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
        }
    }

}

这是模板：

{{Title}}<br>
Hero title : {{Hero.title}}<br>
Hero name : {{Hero.name}}<br>

我在输入中更改了hero.name，该输入与hero.name具有双向绑定。

Angular能否真正检查更改？

显示改变似乎它甚至在可变对象中检查了改变。是的，太棒了！

但ngOnChanges未被调用。似乎有角度没有检查变化。可能只是重置所有视图而不管是否改变。

谁能说实话？谢谢！

Answer 1

Angular通过引用跟踪输入绑定，并且因为Hero对象的引用未更改ngOnChanges未被触发。这意味着Angular未检测到更改 Hero对象引用。此更改检查实际上是 Angular 检查父组件，而不是HeroCardComponent。

但是，在模板中，您使用以下内容：

Hero name : {{Hero.name}}<br>

这意味着每次Angular运行时都会更改HeroCardComponent组件的检测，它必须检查Hero.name是否已更改。它与Hero对象引用的检查无关。当Angular 运行更改HeroCardComponent组件的检测时，我就会发生这种情况。如果DOM中使用的表达式求值为不同的值，则更新dom。您可以在The mechanics of DOM updates in Angular中了解有关更新DOM的更多信息。

如果您想自己跟踪对象突变，可以使用ngDoCheck生命周期钩子。它在文章If you think ngDoCheck means your component is being checked — read this article中进行了深入解释。

有关变更检测的更多信息，请阅读：

angular2：未调用ngOnChanges但显示更改正确

1 个答案: