Angular中Change Detection的示例分析

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

ChangeDection

檢測程序內部狀態，然后反映到UI上。

引起狀態變化，引發檢查的驅動源：Events，XHR，Timers

ApplicationRef監聽NgZone的onTurnDone，然后執行檢測。

OnPush狀態完全由外部決定，內部不會去更改狀態。

例子：

把聰明組件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你來檢查我

在事件發生的時候主動告訴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: "企業協作平臺",
      desc: "這是一個企業內部項目",
      coverImg: "assets/images/covers/0.jpg"
    },
    {
      id:2,
      name: "自動化測試項目",
      desc: "這是一個企業內部項目",
      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() - 當輸入已更改或視圖中發生了事件時，組件通常會標記為臟的（需要重新渲染）。調用此方法會確保即使那些觸發器沒有被觸發，也仍然檢查該組件。<br>在組件的 metadata 中如果設置了 changeDetection: ChangeDetectionStrategy.OnPush 條件，那么變化檢測不會再次執行，除非手動調用該方法。
detach() - 從變化檢測樹中分離變化檢測器，該組件的變化檢測器將不再執行變化檢測，除非手動調用 reattach() 方法。
reattach() - 重新添加已分離的變化檢測器，使得該組件及其子組件都能執行變化檢測
detectChanges() - 從該組件到各個子組件執行一次變化檢測 檢查該視圖及其子視圖。與 <a href="https://angular.cn/api/core/ChangeDetectorRef#detach">detach</a> 結合使用可以實現局部變更檢測。

以上是“Angular中Change Detection的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！