Angular コンポーネントのライフ サイクルとそのさまざまなメソッドの説明

Google によって 2009 年に開始された Angular は、Typescript プログラミング言語を使用した JavaScript 開発フレームワークです。 これは、アプリ開発で最も人気のあるデザイン フレームワークの 1 つです。 Angular フレームワークの最も優れた点は、それがオープンソース アプリケーションであることです。 開発者は Angular フレームワークを使用して、モバイルおよび Web アプリケーションを作成し、データを視覚化します。 Angular 開発の場合、開発者は Angular ライフサイクルと呼ばれる広範なプロセスに従う必要があります。

このブログは、Angular のライフサイクルとそのさまざまなフック メソッドを理解するのに役立ちます。

Angular ライフサイクルとは何ですか?

Angular コンポーネントを実行するために必要なイベントのサイクルは、Angular ライフサイクルと呼ばれます。 Angular コンポーネントは、UI に必要なアプリケーションのビルディング ブロックです。 簡単に言えば、Angular コンポーネントは、Angular アプリケーションで画面のパッチを制御する役割を担うブロックです。 コンポーネントは、セレクター、テンプレート、およびスタイルとともに、さまざまなプロパティで構成されます。 コンポーネントの処理にはメタデータも必要です。

Angular は、さまざまな変更検出手順を実行して、ライフサイクル中にデータにバインドされたプロパティの変更を追跡します。 Angular がコンポーネント クラスを開始すると、Angular のライフサイクルが開始されます。 次に、コンポーネントのビューと子コンポーネントのビューを定義します。 最後に、Angular は使用されなくなったコンポーネントを破棄します。 また、コンポーネントをインスタンス化した後、さまざまなフック メソッドを呼び出します。

さまざまな Angular コンポーネント ライフサイクル フックは、Angular フレームワークの機能として機能します。 各フック メソッドにより、開発者は特定のイベント中にさまざまなコードを実行できます。

世界トップクラスの大学が提供するソフトウェア開発コースをオンラインで学びましょう。 エグゼクティブ PG プログラム、上級認定プログラム、または修士プログラムを取得して、キャリアを加速させましょう。

Angular コンポーネントのライフサイクル

すべての Angular コンポーネントには、8 つの異なる段階に分割された異なるライフサイクルがあります。 これらのステージはライフサイクル フック イベントと呼ばれ、適用時に個別に使用できます。 ライフサイクルが始まる前に、コンポーネント クラスのコンストラクターを実行すると、さまざまなフック イベントが発生します。 Angular ライフサイクルのフック イベントは、2 つの主要なカテゴリに分けられます。 1 つのフェーズは元のコンポーネントにリンクされていますが、2 番目のフェーズはその特定のコンポーネントの子に関連しています。

angularライフサイクルのさまざまな段階を理解しましょう。

• ngOnChanges:- ngOnChanges() イベントは、コンポーネント内の入力コントロールの値を変更したときに発生し、コンポーネントのバインドされたプロパティが変更されます。 簡単に言うと、Angular がコンポーネントのインバウンド プロパティを設定またはリセットするたびに、このフック メソッドが実行されます。 このメソッド中に、現在および以前のプロパティ値の「SimpleCharge」オブジェクトが受信されます。
  このフック メソッドは、現在および以前のプロパティ値の変更されたデータ マップを受け取ります。 データ マップは SimpleCharge としてラップされます。 このイベントは非常に頻繁に行われることを覚えておく必要があります。 したがって、パフォーマンスに大きな影響を与える可能性があるため、イベント中に変更を行うときは細心の注意を払う必要があります。 コンポーネントにバインドされた入力があり、コンポーネントのバインドされたプロパティを変更する場合にのみ、このフック メソッドを使用する必要があります。 したがって、通常はコールバック メソッドとして扱われます。
• ngOnInit:-このイベントは、コンポーネント内のデータを初期化するために使用されます。 ngOnInit() は、データ バインドされたプロパティが Angular によって表示され、入力プロパティがコンポーネントによって設定されると、コンポーネントまたはディレクティブを初期化します。 ngOnInit() の主な目的は、複雑な初期化を実行することです。 フック メソッドは、最初にコンポーネントを使用して、初期データまたはローカル変数を単純な値にソースします。 Angular が入力プロパティを設定すると、コンポーネントの設定に使用されます。 コンポーネントにプロパティがバインドされている場合、通常、ngOnInit() イベントは ngOnChanges の後に呼び出されます。 ただし、コンポーネントにバインドされたプロパティが含まれていない場合は、ngOnInit() イベントを直接実行できます。 また、このフックが呼び出されるのは一度だけであることも覚えておく必要があります。
• ngDoCheck:-このフック イベントは、インプット メソッドのプロパティをチェックするたびに発生します。 ngDoCheck イベントは、各変更検出サイクルの不可欠な部分であり、独自のロジック チェックと共に使用できます。 このイベントは、コンポーネント内のカスタム変更またはアルゴリズムの検出を容易にします。 ngDoCheck book メソッドを使用すると、Angular が検出できない変更を検出できます。 変更検出の実行ごとに ngOnChanges の後に ngDoCheck を呼び出すことができます。 コンポーネントのバインドされたプロパティに変更が加えられていない場合でも、最初の実行で ngOnInit の後にトリガーできます。
  
• ngAfterContentInit:-このフック ステージまたはライフサイクル メソッドは、コンポーネントの有効期間中に 1 回だけ発生するため、ngOnInit に似ています。 コンポーネントのバインディングを初めてチェックする必要があるときに、このイベントを 1 回トリガーできます。 Angular がコンポーネント内でコンテンツ プロジェクション アクティビティを実行した後に、このイベントを実行します。 簡単に言えば、Angular によるコンポーネントのビューまたはディレクティブが存在するビューへの外部コンテンツの射影がある場合、ngAfterContentInit が実行されます。 ngAfterContentInit は、ngDoCheck メソッドを実行した直後に Angular で呼び出されます。 このライフサイクル メソッドは、子コンポーネントの初期化に関連しています。
  
• ngAfterContentChecked:-このフック ステージは、ngDoCheck メソッドの後続のアクションです。 名前が示すように、ngAfterContentChecked メソッドは、Angular がコンポーネント内に投影された外部コンテンツの変更を検出した後に実行されます。 このイベントは、すべての変更検出サイクルの後に発生します。 これは、ngAfterContentInit() および後続のすべての ngDoCheck() の後に呼び出されます。 ngAfterContentInit と同様に、ngAfterContentChecked も子コンポーネントの初期化に関連付けられています。
  
• ngAfterViewInit:- ngAfterViewInit は、コンポーネントのビューの初期化が完了した後にトリガーされます。 ngAfterContentChecked() ライフサイクル メソッドの後に一度だけ呼び出されます。 このフック メソッドは、子コンポーネントではなく、コンポーネントに対してのみ使用されます。
  

  ソフトウェア エンジニアリングに関する人気のコースと記事

  人気番組
  ソフトウェア開発のエグゼクティブ PG プログラム - IIIT B	ブロックチェーン証明書プログラム - PURDUE	サイバーセキュリティ証明書プログラム - PURDUE	コンピューター サイエンスの MSC - IIIT B
  その他の人気記事
  米国のクラウド エンジニアの給与 2021-22	米国でのAWSソリューションアーキテクトの給与	米国のバックエンド開発者の給与	米国のフロントエンド開発者の給与
  アメリカのウェブ開発者の給与	2022年のスクラムマスターインタビューの質問.	2022年にサイバーセキュリティのキャリアを始めるには?	工学部学生のための米国でのキャリアオプション

• ngAfterViewChecked:-このライフサイクルは、Angular がコンポーネントまたは子コンポーネントの検出またはチェック ビューを終了すると呼び出されます。 ngAfterViewInit メソッドの後に ngAfterViewChecked メソッドが呼び出されても、後続の ngAfterContentChecked() ライフサイクル ステージごとに実行されます。 このフック メソッドは、角度コンポーネントのみに関連しています。
  
• ngOnDestroy:- Angular が不要になったコンポーネントを破棄する前に、ngOnDestroy() フック メソッドが実行されます。 このライフサイクル メソッドは、イベントを分離し、メモリ リークを回避するのに役立ちます。 また、オブザーバブルのサブスクライブを解除します。 コンポーネントを削除する前に、このイベントを 1 回だけ呼び出します。 このフック メソッドは、Angular がコンポーネントを破棄する前のクリーンアップとして機能します。

Angular ライフサイクルのインターフェース

Angular のライフサイクルは通常、コンポーネント クラスを通じて定義されます。 ただし、さまざまなフック メソッドに Typescript インターフェイスが関連付けられているため、インターフェイスを使用して Angular コンポーネント クラスを定義することもできます。 通常、インターフェイスは、さまざまなメソッドと関連するプロパティを識別するのに役立つ特性として理解されています。 不要ではありますが、Angular ライフサイクルでインターフェイスを実装することを強くお勧めします。 各インターフェイスの目的は、フック メソッドのプロトタイプを定義することです。 インターフェースは接頭辞「ng」で命名されます。

結論

Angular コンポーネントは typescript プログラミングに基づいています。 したがって、angular ライフサイクル フック メソッドを実装する前に、typescript プログラミングの基本を理解する必要があります。 また、Angular アプリの設計の基礎、ライフサイクル メソッドのプロセス、およびどのフック メソッドを使用するかのノウハウを学ぶことも不可欠です。

Angular アプリ開発のキャリアを追求することを計画している場合は、プロセス全体とさまざまなフック メソッドの機能に関する深い知識が必要です。 さらに、Angular は JavaScript 開発フレームワークであるため、Java プログラミング言語を習得する必要があります。 upGrad のソフトウェア開発エグゼクティブ PG プログラムは、Angular アプリ開発についてゼロから学ぶための優れたオプションです。