填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

ChangeDetectorRef

Angular 各種檢視的基礎類別,提供變更檢測功能。 變更檢測樹會收集要檢查的所有檢視。 使用這些方法從樹中新增或移除檢視、初始化變更檢測並顯式地把這些檢視標記為髒的,意思是它們變了、需要重新渲染。

Base class that provides change detection functionality. A change-detection tree collects all views that are to be checked for changes. Use the methods to add and remove views from the tree, initiate change-detection, and explicitly mark views as dirty, meaning that they have changed and need to be re-rendered.

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

參見

方法

當檢視使用 OnPushcheckOnce)變更檢測策略時,把該檢視顯式標記為已更改,以便它再次進行檢查。

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

      
      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.

從變更檢測樹中分離開檢視。 已分離的檢視在重新附加上去之前不會被檢查。 與 detectChanges() 結合使用,可以實現區域性變更檢測。

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.

      
      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.

檢查該檢視及其子檢視。與 detach 結合使用可以實現區域性變更檢測。

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

      
      abstract detectChanges(): void
    
引數

沒有引數。

返回值

void

檢查變更檢測器及其子檢測器,如果檢測到任何更改,則丟擲異常。

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.

把以前分離開的檢視重新附加到變更檢測樹上。 檢視會被預設附加到這棵樹上。

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.

使用 markForCheck()CheckOnce 策略

Use markForCheck() with CheckOnce strategy

下面的例子為元件設定了 OnPush 變更檢測策略(CheckOnce 而不是預設的 CheckAlways),然後每隔一段時間強制進行第二輪檢測。 參見線上例子

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.

      
      @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, public 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

下面的例子建立了一個用來顯示活動資料的元件。 當 live 屬性為 false 時,該元件就把它的變更檢測器從主變更檢測器樹中分離出來,當該屬性變為 true 時,則重新附加上它。

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.

      
      class DataProvider {
  data = 1;
  constructor() {
    setInterval(() => {
      this.data = 2;
    }, 500);
  }
}


@Component({selector: 'live-data', inputs: ['live'], template: 'Data: {{dataProvider.data}}'})
class LiveData {
  constructor(private ref: ChangeDetectorRef, public dataProvider: DataProvider) {}

  @Input()
  set live(value: boolean) {
    if (value) {
      this.ref.reattach();
    } else {
      this.ref.detach();
    }
  }
}

@Component({
  selector: 'app',
  providers: [DataProvider],
  template: `
       Live Update: <input type="checkbox" [(ngModel)]="live">
       <live-data [live]="live"></live-data>
     `,
})

class App1 {
  live = true;
}