模板语法
服务端渲染
API / @angular/core

ChangeDetectorRef

abstract class ChangeDetectorRef { abstract markForCheck(): void abstract detach(): void abstract detectChanges(): void abstract checkNoChanges(): void abstract reattach(): void }

子类

方法

markForCheck()

When a view uses the OnPush (checkOnce) change detection strategy, explicitly marks the view as changed so that it can be checked again.

当视图使用 OnPush（checkOnce）变更检测策略时，把该视图显式标记为已更改，以便它再次进行检查。

abstract markForCheck(): void

参数

没有参数。

返回值

void

Components are normally marked as dirty (in need of rerendering) when inputs have changed or events have fired in the view. Call this method to ensure that a component is checked even if these triggers have not occured.

当输入已更改或视图中发生了事件时，组件通常会标记为脏的（需要重新渲染）。调用此方法会确保即使那些触发器没有被触发，也仍然检查该组件。

detach()

Detaches this view from the change-detection tree. A detached view is not checked until it is reattached. Use in combination with detectChanges() to implement local change detection checks.

从变更检测树中分离开视图。 已分离的视图在重新附加上去之前不会被检查。 与 detectChanges() 结合使用，可以实现局部变更检测。

abstract detach(): void

参数

没有参数。

返回值

void

Detached views are not checked during change detection runs until they are re-attached, even if they are marked as dirty.

即使已分离的视图已标记为脏的，它们在重新附加上去之前也不会被检查。

detectChanges()

Checks this view and its children. Use in combination with detach to implement local change detection checks.

检查该视图及其子视图。与 detach 结合使用可以实现局部变更检测。

abstract detectChanges(): void

参数

没有参数。

返回值

void

checkNoChanges()

Checks the change detector and its children, and throws if any changes are detected.

检查变更检测器及其子检测器，如果检测到任何更改，则抛出异常。

abstract checkNoChanges(): void

参数

没有参数。

返回值

void

Use in development mode to verify that running change detection doesn't introduce other changes.

在开发模式下可用来验证正在运行的变更检测器是否引入了其它变更。

reattach()

Re-attaches the previously detached view to the change detection tree. Views are attached to the tree by default.

把以前分离开的视图重新附加到变更检测树上。 视图会被默认附加到这棵树上。

abstract reattach(): void

参数

没有参数。

返回值

void

使用说明

The following examples demonstrate how to modify default change-detection behavior to perform explicit detection when needed.

下面的例子演示了如何修改默认的变更检测行为，以便在需要时执行显式变更检测。

Use markForCheck() with CheckOnce strategy

使用 markForCheck() 和 CheckOnce 策略

The following example sets the OnPush change-detection strategy for a component (CheckOnce, rather than the default CheckAlways), then forces a second check after an interval. See live demo.

下面的例子为组件设置了 OnPush 变更检测策略（CheckOnce 而不是默认的 CheckAlways），然后每隔一段时间强制进行第二轮检测。 参见在线例子。

@Component({ selector: 'my-app', template: `Number of ticks: {{numberOfTicks}}`, changeDetection: ChangeDetectionStrategy.OnPush, }) class AppComponent { numberOfTicks = 0; constructor(private ref: ChangeDetectorRef) { setInterval(() => { this.numberOfTicks++; // require view to be updated this.ref.markForCheck(); }, 1000); } }

Detach change detector to limit how often check occurs

分离开变更检测器以限制变更检测的发生频度

The following example defines a component with a large list of read-only data that is expected to change constantly, many times per second. To improve performance, we want to check and update the list less often than the changes actually occur. To do that, we detach the component's change detector and perform an explicit local check every five seconds.

下面的例子定义了一个带有只读数据的大型列表，这些数据预计每秒会变化很多次。 为了提高性能，我们检测和更新列表的频率就应该比实际发生的变化少得多。 要解决这个问题，就要分离开变更检测器，并每隔五秒钟显式执行一次变更检查。

class DataListProvider { // in a real application the returned data will be different every time get data() { return [1, 2, 3, 4, 5]; } } @Component({ selector: 'giant-list', template: ` <li *ngFor="let d of dataProvider.data">Data {{d}}</li> `, }) class GiantList { constructor(private ref: ChangeDetectorRef, private dataProvider: DataListProvider) { ref.detach(); setInterval(() => { this.ref.detectChanges(); }, 5000); } } @Component({ selector: 'app', providers: [DataListProvider], template: ` <giant-list><giant-list> `, }) class App { }

Reattaching a detached component

重新附加一个已分离的组件

The following example creates a component displaying live data. The component detaches its change detector from the main change detector tree when the live property is set to false, and reattaches it when the property becomes true.

下面的例子创建了一个用来显示活动数据的组件。 当 live 属性为 false 时，该组件就把它的变更检测器从主变更检测器树中分离出来，当该属性变为 true 时，则重新附加上它。

class DataListProvider { // in a real application the returned data will be different every time get data() { return [1, 2, 3, 4, 5]; } } @Component({ selector: 'giant-list', template: ` <li *ngFor="let d of dataProvider.data">Data {{d}}</li> `, }) class GiantList { constructor(private ref: ChangeDetectorRef, private dataProvider: DataListProvider) { ref.detach(); setInterval(() => { this.ref.detectChanges(); }, 5000); } } @Component({ selector: 'app', providers: [DataListProvider], template: ` <giant-list><giant-list> `, }) class App { }