我是鑫丽颖 發表於 2019-7-6 16:45:00

angular 的 ChangeDetectorRef

<p>监测页面数据变化<br>angular 会在我们的组件发生变化的时候,对我们的组件执行变化检测,如果检测到我们的数据发生了变化,就会执行某些操作,如修改绑定数据的时候更新视图。这样一来,当我们的组件数据比较多的时候,angular就会有很多操作在静悄悄地进行,因此,就需要ChangeDetectorRef来实时检测数据的变化并更新视图数据<br>1、引入ChangeDetectorRef模块<br>import { ChangeDetectorRef&nbsp;} from “angular”;<br>2、声明<br>constructor(private cd:ChangeDetectorRef) {<br>}<br>3、引用<br>this.cd.detectChanges();实时检测页面及其子元素的变化</p>
<p>&nbsp;</p>
<p>changeDetection: ChangeDetectionStrategy.OnPush<br>当使用 OnPush 策略的时候,若输入属性没有发生变化,组件的变化检测将会被跳过</p>
<p>ChangeDetectorRef 是组件的变化检测器的引用</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">export abstract class ChangeDetectorRef {
  abstract markForCheck(): void;
  abstract detach(): void;
  abstract detectChanges(): void;
  abstract reattach(): void;
}<br>
markForCheck() - 当输入已更改或视图中发生了事件时,组件通常会标记为脏的(需要重新渲染)。调用此方法会确保即使那些触发器没有被触发,也仍然检查该组件。<br>在组件的 metadata 中如果设置了 changeDetection: ChangeDetectionStrategy.OnPush 条件,那么变化检测不会再次执行,除非手动调用该方法。
detach() - 从变化检测树中分离变化检测器,该组件的变化检测器将不再执行变化检测,除非手动调用 reattach() 方法。
reattach() - 重新添加已分离的变化检测器,使得该组件及其子组件都能执行变化检测
detectChanges() - 从该组件到各个子组件执行一次变化检测 检查该视图及其子视图。与&nbsp;detach&nbsp;结合使用可以实现局部变更检测。
</pre>
</div>
<p>  </p>
<p>onPush()策略时 浅拷贝数据触发输入属性的变化以触发检查</p><br><br>
来源:https://www.cnblogs.com/lskzj/p/11143233.html
頁: [1]
查看完整版本: angular 的 ChangeDetectorRef