KeyValueDiffers を使用して Angular オブジェクトの変更を検出する

KeyValueDiffers を使用して Angular オブジェクトの変更を検出する

ngDoCheck フック

ngDoCheckこれは、Angular ライフサイクル フックの 1 つです。これにより、Angular が変更を検出したときにコンポーネントがカスタム変更検出ロジックを実行できるようになります。

ChangeDetectorRef.detectChanges()Angular は、コンポーネントまたはディレクティブの入力プロパティが変更されたとき、コンポーネント内で変更検出サイクルが発生したとき、または変更検出戦略がアクティブにトリガーされたとき (メソッド経由など) にメソッドを呼び出しますngDoCheck。

フックを使用してカスタム検出ロジックを実行できますngDoCheckが、フックを悪用しないように注意する必要があります。このフックは頻繁にトリガーされるため、内部ロジックの複雑さとリソースの消費は最小限に抑える必要があります。

簡単な例を次に示します。

import {
    
     Component, Input, DoCheck } from '@angular/core';

@Component({
    
    
  selector: 'app-custom-component',
  template: `
    <p>{
     
     { name }} has {
     
     { itemCount }} items.</p>
  `
})
export class CustomComponent implements DoCheck {
    
    
  @Input() name: string;
  @Input() items: any[];

  itemCount: number;

  ngDoCheck(): void {
    
    
    if (this.items && this.items.length !== this.itemCount) {
    
    
      this.itemCount = this.items.length;
    }
  }
}

上記の例では、メソッドを使用してインターフェイスCustomComponentが実装されDoCheck、プロパティngDoCheckが更新されますitemCount。このコンポーネントはitems入力属性の変更をリッスンし、属性の長さが変更された場合は属性を更新しますitemCount。このようにして、コンポーネントは変更検出サイクルごとにitemCountプロパティを更新し、テンプレートを再レンダリングします。

KeyValueDiffersService

KeyValueDiffersこれは、オブジェクト内のキーと値のペアの変更を検出するために使用される、Angular の注入可能なサービスです。

KeyValueDifferオブジェクト内の 1 つまたはいくつかのキーと値のペアの変更を監視する必要がある場合、これらの変更をリッスンするオブジェクトを作成できます。コンポーネントのコンストラクターにサービスを挿入しKeyValueDiffers、メソッド内でngOnInit()サービスのfind()メソッドを使用してリッスンするオブジェクトを見つけ、そのdiff()メソッドを使用してKeyValueDifferオブジェクトを作成します。

簡単な例を次に示します。

import {
    
     Component, KeyValueDiffers, OnInit } from '@angular/core';

@Component({
    
    
  selector: 'app-custom-component',
  template: `
    <p *ngFor="let item of items">{
     
     { item.key }}: {
     
     { item.value }}</p>
  `
})
export class CustomComponent implements OnInit {
    
    
  items = [
    {
    
     key: 'name', value: 'John' },
    {
    
     key: 'age', value: 30 },
    {
    
     key: 'email', value: '[email protected]' }
  ];

  private differ: any;

  constructor(private differs: KeyValueDiffers) {
    
    }

  ngOnInit(): void {
    
    
    this.differ = this.differs.find(this.items).create();
  }

  ngDoCheck(): void {
    
    
    const changes = this.differ.diff(this.items);

    if (changes) {
    
    
      console.log('Changes detected!');
      // Handle changes here
    }
  }
}

上記の例では、サービスはCustomComponentコンポーネントのコンストラクターに挿入されますKeyValueDiffers。ngOnInit()ライフサイクル メソッドでは、differs.find()メソッドを呼び出してitems配列を検索し、create()そのメソッドを使用してKeyValueDifferオブジェクトを作成します。

次に、コンポーネントのngDoCheck()ライフサイクル メソッドで、diff()メソッドを呼び出してオブジェクト内のキーと値のペアに対する変更を確認し、必要に応じて必要なアクションを実行します。実際のプロジェクトでは、このメソッドを使用して、フォーム コントロールや構成アイテムの変更など、いくつかの重要な状態を監視できます。

KeyValueDiffers のその他の使用法

サービスに関してKeyValueDiffers、一般的に使用されるいくつかのメソッドとプロパティを次に示します。

• find(): 指定されたオブジェクトから対応するものを検索しますKeyValueDifferFactory。例えば：this.differs.find(obj).create()
• factories: 登録されているすべての配列を含む配列を返しますKeyValueDifferFactory。
• create():KeyValueDifferオブジェクトを作成します。例えば：this.diff.create(obj)
• differs:注入できるKeyValueDiffersサービス インスタンスを返します。

KeyValueDiffer次のメソッドが含まれます。

• diff(): 更新されたキーと値のペアを返します。変更がない場合は null を返します。
• onDestroy(): リソースをクリーンアップします。Angular がこのディレクティブを破棄するときのように。

KeyValueDiffersと を使用する主な目的KeyValueDifferは、オブジェクト内の特定のキーと値のペアの変更が検出されたときに、特定の操作を実行することです。Angular の他の変更検出と同様に、KeyValueDiffers複数の変更によって引き起こされる不要なレンダリングの問題を回避し、アプリケーションのパフォーマンスを向上させるのに役立ちます。

KeyValueDiffersおよび をKeyValueDiffer使用してオブジェクトの変更を監視する場合、パフォーマンスを向上させるために、監視範囲を縮小し、必要な部分のみを監視して、不要な計算や操作を避けるようにする必要があることに注意してください。