更改检测以及应用于所有组件的必要性

Question

我正在研究Angular的变更检测，我遇到了以下问题：让我们将以下代码作为基础：

@Component({
  template: `
    <h1>{{item}}</h1>
    <button (click)="changeModel()">Change</button>
  `
})
class MyApp {

  item:string = 'cheese';

  changeModel() {
    this.item = 'bread';
  }
}

点击Change按钮后， 模式更改 ， 触发更改检测 ，将应用适当的DOM更新以反映item中的更改。到现在为止还挺好。但是，Angular触发器会将检测更​​改为所有组件。 所以，这是我的查询：这样做的重点是什么？我们可以说，还有另一个组件 B 与item.具有约束力。在将来某个时候， B 即将显示，新的DOM将基于item的新正确值构建。那么，what's the point in running change detection in B每次item的值都会通过上面提到的组件发生变化？

Answer 1

  

再一次，B中运行变更检测的重点是什么   时间通过上面提到的项目的价值的变化   成分

假设您 B组件是 MyApp组件的孩子。 Item通过@Input绑定到 B组件。所以：

class BComponent{
 @Input() item: string;

 ngOnChanges(changeObj){
  // catch item changes here

 }

} 

每当Item的值在 Parent 组件中发生更改时，都会相应地调用B组件的ngOnChanges生命周期挂钩。

StackBlitz example

  

那么，什么是在C组件中应用变化检测的用途   A？

中有什么变化

在角度变化检测策略中，从顶级组件到其子组件。 角度的任何组件都是直接/间接子根组件。所以，根组件是起点。如果您在UI中有一些组件树，则可以在组件及其子组件上禁用更改检测，但有一些例外：

只需应用于组件装饰器：

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`],
  changeDetection: ChangeDetectionStrategy.OnPush
})

如果你想更深入地阅读，Max NgWizard K有很多文章。@ AngularInDepth.com

Everything you need to know about change detection in Angular

Answer 2

TL; DR ：角色检查每个玩家互动的各处变化，因为它是处理互动的最简单，最可靠的方式，通过使用可能让组件影响另一个的服务“仅通过服务处理数据链接，Default变更检测器策略就像这样，但还有其他解决方案。

默认的变化检测器策略基本上就是说“如果应用程序中的任何地方发生任何事情，请检查所有其他元素以确保没有更改，否则应用更改”。这对于小型应用程序来说很不错，但是一旦你开始拥有大量具有严格优化调用的组件（比如模板中的重型计算函数调用），它就变得非常沉重和缓慢。

我猜你背后的问题是“如何改变这种行为？”。

更改检测器可能受多种方式影响：

ChangeDetectionStrategy

更改它的第一种方法是将changeDetectionStrategy装饰器参数对象中的@Component属性设置为OnPush，这就像对变更检测器说“只​​考虑此组件和如果其中一个输入发生变化，其子项就会改变。“。

分离ChangeDetectorRef

您可以通过简单地将变换检测器ref添加到组件构造函数（private cdRef: ChangeDetectorRef）的任何位置来注入更改检测器参考，一旦注入，您就可以完全控制当前组件及其子组件的更改检测器，可以分离它，就像说“不要在这里检查更改”并在需要时重新附加它，您也可以手动告诉CD检查更改，并将它们应用到DOM。