シグナルクエリで子要素をクエリする

ディレクティブでのシグナルの使い方を学んだところで、シグナルベースのクエリAPIについて見ていきましょう。これらは、子コンポーネントやディレクティブにアクセスして操作するためのリアクティブな方法を提供します。コンポーネントとディレクティブの両方がクエリを実行でき、またそれら自身もクエリされることがあります。従来のViewChildとは異なり、シグナルクエリは自動的に更新され、子コンポーネントやディレクティブへの型安全なアクセスを提供します。

このアクティビティでは、子コンポーネントとプログラムでやり取りするためにviewChildクエリを追加します。

1. viewChildのインポートを追加

   まず、app.tsで子コンポーネントにアクセスするためにviewChildのインポートを追加します。

   import {Component, signal, computed, viewChild, ChangeDetectionStrategy} from '@angular/core';

2. viewChildクエリを作成

   AppコンポーネントにviewChildクエリを追加して、子コンポーネントにアクセスします。

   // Query APIs to access child components
   firstProduct = viewChild(ProductCard);
   cartSummary = viewChild(CartSummary);

   これらのクエリは、子コンポーネントインスタンスを参照するシグナルを作成します。

3. 親メソッドを実装

   viewChildクエリを使用して、app.tsで子コンポーネントのメソッドを呼び出します。

   showFirstProductDetails() {
     const product = this.firstProduct();
     if (product) {
       product.highlight();
     }
   }
   
   initiateCheckout() {
     const summary = this.cartSummary();
     if (summary) {
       summary.initiateCheckout();
     }
   }

4. インタラクションをテスト

   コントロールボタンが動作するようになりました。

   • "Show First Product Details" - ProductCardでhighlight()を呼び出します
   • "Initiate Checkout" - CartSummaryでinitiateCheckout()を呼び出します

   ボタンをクリックして、viewChildクエリが親コンポーネントによる子コンポーネントの動作制御をどのように可能にするかを確認してください。

完璧です！子コンポーネントのインタラクションのためにシグナルベースのクエリAPIを使用する方法を学びました。

次のレッスンでは、effectでシグナルの変更に反応する方法について学びます！