這篇文章主要介紹Angular中Change Detection的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司長期為1000多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為梁園企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計、做網(wǎng)站，梁園網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

ChangeDection

檢測程序內(nèi)部狀態(tài)，然后反映到UI上。

引起狀態(tài)變化，引發(fā)檢查的驅(qū)動源：Events，XHR，Timers

ApplicationRef監(jiān)聽NgZone的onTurnDone，然后執(zhí)行檢測。

OnPush狀態(tài)完全由外部決定，內(nèi)部不會去更改狀態(tài)。

例子：

把聰明組件project-list變成OnPush檢查策略,

在需要檢測時候使用cd.markForCheck).

@Component({
  selector: "app-project-list",
  templateUrl: "./project-list.component.html",
  styleUrls: ["./project-list.component.scss"],
  animations:[
    slideToRight,listAnimation
  ],  changeDetection: ChangeDetectionStrategy.OnPush})

手動告訴Angualr你來檢查我

在事件發(fā)生的時候主動告訴Angular來檢查這條路線。

import { Component, OnInit , HostBinding, ChangeDetectionStrategy, ChangeDetectorRef } from "@angular/core";
import { MatDialog } from "@angular/material";
import { NewProjectComponent } from "../new-project/new-project.component";
import { InviteComponent } from '../invite/invite.component';
import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
import {slideToRight} from '../../animate/router.animate'import { listAnimation } from '../../animate/list.animate';
import { projection } from '@angular/core/src/render3';

@Component({
  selector: "app-project-list",
  templateUrl: "./project-list.component.html",
  styleUrls: ["./project-list.component.scss"],
  animations:[
    slideToRight,listAnimation
  ],  changeDetection: ChangeDetectionStrategy.OnPush})
export class ProjectListComponent implements OnInit {
  @HostBinding('@routeAnim') state;

  projects = [
    {
      id:1,
      name: "企業(yè)協(xié)作平臺",
      desc: "這是一個企業(yè)內(nèi)部項目",
      coverImg: "assets/images/covers/0.jpg"
    },
    {
      id:2,
      name: "自動化測試項目",
      desc: "這是一個企業(yè)內(nèi)部項目",
      coverImg: "assets/images/covers/2.jpg"
    }
  ];
  constructor(private dialog: MatDialog, private cd:ChangeDetectorRef) { }

  ngOnInit() { }

  openNewProjectDialog() {    // this.dialog.open(NewProjectComponent,{data:'this is a dialog'});
    const dialogRef = this.dialog.open(NewProjectComponent, {
      data: { title: '新建項目' }
    });
    dialogRef.afterClosed().subscribe((result) => {
      console.log(result);      this.projects = [...this.projects, 
        {id:3,name:'一個新項目',desc:'這是一個新項目',coverImg:"assets/images/covers/3.jpg"},
        {id:4,name:'又一個新項目',desc:'這是又一個新項目',coverImg:"assets/images/covers/4.jpg"}]
    });    this.cd.markForCheck();
  }

  lauchInviteDialog() {
    const dialogRef = this.dialog.open(InviteComponent);
  }

  lauchUpdateDialog() {
    const dialogRef = this.dialog.open(NewProjectComponent, {
      data: { title: '編輯項目' }
    });
  }

  lauchConfimDialog(project) {
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      data: { title: '刪除項目', content: '您確認刪除該項目嗎？' }
    });
    dialogRef.afterClosed().subscribe(result=>{
      console.log(result);      this.projects=this.projects.filter(p=>p.id!=project.id);      this.cd.markForCheck();
    });
  }
}

把笨組件標識為OnPush

直接加changeDetection:ChangeDetectionStrategy.OnPush

@Component({
  selector: 'app-new-project',
  templateUrl: './new-project.component.html',
  styleUrls: ['./new-project.component.scss'],  changeDetection:ChangeDetectionStrategy.OnPush})

ChangeDetectorRef

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

markForCheck() - 當(dāng)輸入已更改或視圖中發(fā)生了事件時，組件通常會標記為臟的（需要重新渲染）。調(diào)用此方法會確保即使那些觸發(fā)器沒有被觸發(fā)，也仍然檢查該組件。
在組件的 metadata 中如果設(shè)置了 changeDetection: ChangeDetectionStrategy.OnPush 條件，那么變化檢測不會再次執(zhí)行，除非手動調(diào)用該方法。
detach() - 從變化檢測樹中分離變化檢測器，該組件的變化檢測器將不再執(zhí)行變化檢測，除非手動調(diào)用 reattach() 方法。
reattach() - 重新添加已分離的變化檢測器，使得該組件及其子組件都能執(zhí)行變化檢測
detectChanges() - 從該組件到各個子組件執(zhí)行一次變化檢測 檢查該視圖及其子視圖。與 detach 結(jié)合使用可以實現(xiàn)局部變更檢測。

以上是“Angular中Change Detection的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！