Sinyal sorgularıyla alt elemanları sorgulama

Artık sinyalleri direktiflerle nasıl kullanacağınızı öğrendiğinize göre, sinyal tabanlı sorgu API'lerini keşfedelim. Bunlar, alt bileşenlere ve direktiflere erişmenin ve onlarla etkileşim kurmanın reaktif bir yolunu sağlar. Hem bileşenler hem de direktifler sorgu yapabilirken aynı zamanda kendileri de sorgulanabilir. Geleneksel ViewChild'ın aksine, sinyal sorguları otomatik olarak güncellenir ve alt bileşenlere ve direktiflere tür güvenli erişim sağlar.

Bu aktivitede, alt bileşenlerle programatik olarak etkileşim kurmak için viewChild sorguları ekleyeceksiniz.

1. viewChild içe aktarmasını ekleyin

   Önce, app.ts dosyasında alt bileşenlere erişmek için viewChild içe aktarmasını ekleyin.

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

2. viewChild sorguları oluşturun

   Alt bileşenlere erişmek için App bileşenine viewChild sorguları ekleyin.

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

   Bu sorgular, alt bileşen örneklerine referans veren sinyaller oluşturur.

3. Üst bileşen metotlarını uygulayın

   app.ts dosyasında alt bileşenler üzerinde metotları çağırmak için viewChild sorgularını kullanın:

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

4. Etkileşimleri test edin

   Kontrol düğmeleri artık çalışmalıdır:

   • "Show First Product Details" - ProductCard üzerinde highlight() çağırır
   • "Initiate Checkout" - CartSummary üzerinde initiateCheckout() çağırır

   Düğmelere tıklayarak viewChild sorgularının üst bileşenlerin alt bileşen davranışını nasıl kontrol ettiğini görün.

Mükemmel! Alt bileşen etkileşimi için sinyal tabanlı sorgu API'lerini nasıl kullanacağınızı öğrendiniz:

Bir sonraki derste, sinyal değişikliklerine effect ile nasıl tepki verileceğini öğreneceksiniz!