Computed sinyallerle durum türetme

Artık sinyal oluşturmayı ve güncellemeyi öğrendiğinize göre, hesaplanmış (computed) sinyalleri öğrenelim. Hesaplanmış sinyaller, bağımlılıkları değiştiğinde otomatik olarak güncellenen türetilmiş değerlerdir. Diğer sinyallere dayalı reaktif hesaplamalar oluşturmak için mükemmeldirler.

Bu aktivitede, bağımlı sinyaller değiştiğinde otomatik olarak güncellenen türetilmiş durum oluşturmak için computed() fonksiyonunu nasıl kullanacağınızı öğreneceksiniz.

Kullanıcı durum sinyalimizden bilgi türeten hesaplanmış değerler ekleyerek kullanıcı durum sistemimizi geliştirelim. Başlangıç kodu artık üç durum seçeneği içeriyor: 'online', 'away' ve 'offline'.

1. computed fonksiyonunu içe aktarın

   Mevcut içe aktarmalarınıza computed ekleyin.

   // Add computed to existing imports
   import {Component, signal, computed, ChangeDetectionStrategy} from '@angular/core';

2. Bildirimler için bir computed sinyal oluşturun

   Kullanıcı durumuna göre bildirimlerin etkinleştirilip etkinleştirilmeyeceğini belirleyen bir hesaplanmış sinyal ekleyin.

   notificationsEnabled = computed(() => this.userStatus() === 'online');

   Bu hesaplanmış sinyal, userStatus sinyali her değiştiğinde otomatik olarak yeniden hesaplanacaktır. Sinyalin değerini okumak için hesaplanmış fonksiyonun içinde this.userStatus() çağrısını nasıl yaptığımıza dikkat edin.

3. Açıklayıcı bir mesaj için computed sinyal oluşturun

   Kullanıcı durumuna göre açıklayıcı bir mesaj oluşturan bir hesaplanmış sinyal ekleyin.

   statusMessage = computed(() => {
     const status = this.userStatus();
     switch (status) {
       case 'online':
         return 'Available for meetings and messages';
       case 'away':
         return 'Temporarily away, will respond soon';
       case 'offline':
         return 'Not available, check back later';
       default:
         return 'Status unknown';
     }
   });

   Bu, hesaplanmış sinyallerin switch ifadeleri ve dize dönüşümleriyle daha karmaşık mantığı nasıl işleyebileceğini gösterir.

4. Çalışma saatleri müsaitliğini hesaplayan bir computed sinyal oluşturun

   Kullanıcının çalışma saatleri içinde olup olmadığını hesaplayan bir hesaplanmış sinyal ekleyin.

   isWithinWorkingHours = computed(() => {
     const now = new Date();
     const hour = now.getHours();
     const isWeekday = now.getDay() > 0 && now.getDay() < 6;
     return isWeekday && hour >= 9 && hour < 17 && this.userStatus() !== 'offline';
   });

   Bu, hesaplanmış sinyallerin nasıl hesaplamalar yapabildiğini ve birden fazla veri kaynağını birleştirebildiğini gösterir. userStatus değiştiğinde değer otomatik olarak güncellenir.

5. Computed değerleri şablonda görüntüleyin

   Şablonda zaten "Loading..." gösteren yer tutucular var. Bunları hesaplanmış sinyallerinizle değiştirin:

   1. Bildirimler için, Loading... yerine bir @if bloğu koyun:

      @if (notificationsEnabled()) {
        Enabled
      } @else {
        Disabled
      }

   2. Mesaj için, Loading... yerine şunu koyun:

      {{ statusMessage() }}

   3. Çalışma saatleri için, Loading... yerine bir @if bloğu koyun:

      @if (isWithinWorkingHours()) {
        Yes
      } @else {
        No
      }

   Hesaplanmış sinyallerin normal sinyaller gibi - parantezlerle - çağrıldığına dikkat edin!

Mükemmel! Artık hesaplanmış sinyaller oluşturmayı öğrendiniz.

Hatırlanması gereken bazı önemli noktalar:

• Hesaplanmış sinyaller reaktiftir: Bağımlılıkları değiştiğinde otomatik olarak güncellenir
• Salt okunurdur: Hesaplanmış değerleri doğrudan ayarlayamazsınız, diğer sinyallerden türetilirler
• Karmaşık mantık içerebilirler: Hesaplamalar, dönüşümler ve türetilmiş durum için kullanın
• Dinamik duruma dayalı performanslı hesaplamalar yapmanın bir yolunu sağlarlar: Angular, yalnızca bağımlılıkları gerçekten değiştiğinde bunları yeniden hesaplar

Bir sonraki derste, linkedSignal ile durum türetmenin farklı bir yolunu öğreneceksiniz!