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

成都創(chuàng)新互聯(lián)公司服務(wù)項目包括安順網(wǎng)站建設(shè)、安順網(wǎng)站制作、安順網(wǎng)頁制作以及安順網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，安順網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到安順省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

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

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

網(wǎng)站題目：Angular中ChangeDetection的示例分析-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://www.rwnh.cn/article8/ceijip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、Google、網(wǎng)站設(shè)計公司、網(wǎng)站建設(shè)、定制開發(fā)、標簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)