Angular Academy · Ders

Şablonlarda Sinyaller

Sinyal değerlerini doğrudan bileşen şablonlarına bağlayın.

Şablonlarda Sinyaller, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

Şablonlarda Sinyaller

Sinyallerin en iyi yönlerinden biri şudur: Tıpkı TypeScript'te olduğu gibi, onları çağırarak doğrudan şablonlarda okuyabilirsiniz. Asenkron pipe gerekmez.

Enterpolasyonda Okuma

Şablonda, değerini görüntülemek için sinyali çift süslü parantezli enterpolasyonun içinde çağırın.

@Component({
  selector: 'app-counter',
  template: '<p>Count: {{ count() }}</p>'
})
export class CounterComponent {
  count = signal(0);
}

Asenkron Pipe Gerekmez

Observable'larda abone olmak ve abonelikten çıkmak için asenkron pipe kullanmanız gerekiyordu. Sinyaller eşzamanlıdır; bu nedenle onları yalnızca çağırmanız yeterlidir. Abonelikten çıkmanız gerekmez.

Görünümler Otomatik Güncellenir

Şablonda okunan bir sinyal değiştiğinde Angular, şablonun bu sinyale bağlı olduğunu bilir ve yalnızca ilgili bağlamayı günceller. İnce ayrıntılı tepkisellik iş başında budur.

Olay İşleyicilerinde Sinyalleri Çağırma

Olayları sinyalleri güncelleyen bileşen yöntemlerine bağlayın. Şablon, etkilenen bağlamaları otomatik olarak yeniden oluşturur.

@Component({
  selector: 'app-counter',
  template: '<button (click)="inc()">{{ count() }}</button>'
})
export class CounterComponent {
  count = signal(0);
  inc() { this.count.update(v => v + 1); }
}

Özellik Bağlamalarında Sinyaller

Özellik ve öznitelik bağlamaları da dahil olmak üzere, herhangi bir bağlamanın içinde bir sinyali çağırabilirsiniz.

// disabled when count reaches 0
// template: <button [disabled]="count() === 0">Go</button>

Yerleşik Denetim Akışıyla Sinyaller

Modern şablonlarda yerleşik denetim akışı blokları kullanılır. Bir if bloğunun içinde sinyali çağırarak okuyabilirsiniz.

// template:
// @if (count() > 0) {
//   <p>Positive</p>
// }

Şablonlarda Hesaplanan Sinyaller

Türetilmiş değerler şablonlar için çok kullanışlıdır. Hesaplanan bir sinyal yalnızca kaynakları değiştiğinde yeniden hesaplanır ve aynı şekilde okunur.

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

export class CartComponent {
  qty = signal(2);
  price = signal(10);
  total = computed(() => this.qty() * this.price());
}

Görünümde Hesaplanan Sinyali Okuma

Hesaplanan sinyali, diğer tüm sinyaller gibi şablonda okuyun.

// template: <p>Total: {{ total() }}</p>

Bunun Verimli Olmasının Nedeni

Angular, hangi şablon ifadelerinin hangi sinyalleri okuduğunu tam olarak izlediği için değişen sinyale bağlı olmayan görünüm bölümlerindeki işlemleri atlayabilir.

Yaygın Hata: Parantezleri Unutmak

Bir şablonda count() yerine count yazarsanız değerini değil, sinyal işlevinin kendisini görüntülersiniz. Sinyali her zaman çağırın.

Kısa Kontrol: Şablonlar

Sinyaller şablonlarda nasıl kullanılır?

Özet: Şablonlarda Sinyaller

Sinyalleri şablonlarda parantezlerle çağırarak, asenkron pipe kullanmadan ve abonelikten çıkmanız gerekmeksizin okursunuz. Angular yalnızca değişen sinyale bağlı bağlamaları günceller; hesaplanan sinyaller de aynı şekilde çalışır. Sinyallerin temellerini tamamladınız.

Sıkça Sorulan Sorular

“Şablonlarda Sinyaller” dersi ücretsiz mi?

Evet — “Şablonlarda Sinyaller” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“Şablonlarda Sinyaller” dersinde ne öğreneceğim?

Sinyal değerlerini doğrudan bileşen şablonlarına bağlayın. Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Şablonlarda Sinyaller” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön