ngOnChangesと入力変更
入力プロパティの変更に反応します。
「ngOnChangesと入力変更」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
入力値の変更への対応
OnChanges フックを使うと、コンポーネントの @Input プロパティが変更されるたびに対応できます。Angular は ngOnInit の前と、入力値が更新されるたびに ngOnChanges を呼び出します。
OnChanges の実装
OnChanges インターフェースを実装し、SimpleChanges オブジェクトを受け取る ngOnChanges メソッドを追加します。
import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";
@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnChanges {
@Input() count = 0;
ngOnChanges(changes: SimpleChanges): void {
console.log(changes);
}
}SimpleChanges オブジェクト
SimpleChanges は入力名をキーとするマップです。各エントリは currentValue、previousValue、firstChange を持つ SimpleChange です。
ngOnChanges(changes: SimpleChanges) {
const c = changes["count"];
if (c) {
console.log(c.previousValue, "->", c.currentValue);
}
}最初の変更を検知する
firstChange フラグは、入力値が最初に設定されたときに true になります。これを使って、初期化とそれ以降の更新を区別できます。
ngOnChanges(changes: SimpleChanges) {
if (changes["count"]?.firstChange) {
console.log("initial value");
} else {
console.log("updated value");
}
}特定の入力値への対応
すべてのサイクルで毎回入力値が変更されるとは限らないため、読み取る前に必ずキーが存在することを確認してください。
ngOnChanges(changes: SimpleChanges) {
if ("userId" in changes) {
this.reload(this.userId);
}
}参照に基づく検知
ngOnChanges は、オブジェクトや配列の 参照 が変わったときに実行されます。入力値として渡されたオブジェクトを変更しても、ngOnChanges は実行されません。
// will NOT trigger ngOnChanges in parent-bound child:
this.config.theme = "dark";
// will trigger it:
this.config = { ...this.config, theme: "dark" };ngOnInit との実行順序
作成時には、まず初期入力値を伴って ngOnChanges が実行され、次に ngOnInit が実行されます。その後は、入力値が変更されるたびに ngOnChanges が再び実行されます。
古い値と新しい値の比較
よくある用途は、値が実際に異なる場合だけ対応することです。たとえば、id の入力値が変わったときにデータを再読み込みします。
ngOnChanges(changes: SimpleChanges) {
const id = changes["userId"];
if (id && id.currentValue !== id.previousValue) {
this.fetchUser(id.currentValue);
}
}安全のための型指定
changes から値を読み取ることも、コンポーネントのプロパティから直接読み取ることもできます。ngOnChanges の後は、プロパティにすでに現在の値が保持されています。
ngOnChanges() {
// this.count already updated here
this.total = this.count * 2;
}OnChanges を使わない場面
1つの入力値から派生する状態には、getter や computed value のほうが簡潔な場合があります。入力値の更新時に実行する必要がある副作用には ngOnChanges を使用してください。
複数の入力値を同時に変更する
同じサイクルで複数の入力値が変更された場合、ngOnChanges はそれらすべてを含む SimpleChanges マップを受け取って1回呼び出されます。
ngOnChanges(changes: SimpleChanges) {
// both keys may be present
if (changes["min"] || changes["max"]) {
this.validateRange();
}
}理解度チェック
OnChanges についての理解度を確認しましょう。
まとめ
OnChanges フックは、currentValue、previousValue、firstChange を含む SimpleChanges マップを通じて入力値の変更に対応します。参照が変わったときに実行されるため、イミュータブルな更新を使用してください。
よくある質問
「ngOnChangesと入力変更」レッスンは無料ですか？
はい。「ngOnChangesと入力変更」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「ngOnChangesと入力変更」で何を学びますか？
入力プロパティの変更に反応します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「ngOnChangesと入力変更」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ngOnInitと初期化
- ngOnChangesと入力変更
- ngOnDestroyとクリーンアップ
- AfterViewとAfterContentフック