Angular Academy · Ders

async Pipe'ı

El ile temizleme yapmadan şablonlarda abone olun.

async Pipe'ı, 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.

async Pipe Ne Yapar

async pipe, şablondaki bir Observable'a (veya Promise'e) abone olur, yayımlanan en son değeri görüntüler ve bileşen yok edildiğinde abonelikten otomatik olarak çıkar.

Temel Kullanım

Bir observable'ı doğrudan şablona bağlayın ve async üzerinden aktarın.

@Component({
  template: '<p>{{ message$ | async }}</p>'
})
export class HelloComponent {
  message$ = of('Hello from RxJS');
}

async ile Nesneleri Görüntüleme

Bu özellik, yayımlanan her türle çalışır. json veya date gibi diğer pipe'larla birlikte kullanabilirsiniz.

user$ = this.http.get('/api/me');
// template:
// <pre>{{ user$ | async | json }}</pre>

Birden Çok Abonelikten Kaçınma

Her async kullanımı bir abonelik oluşturur. Aynı observable'ı birçok kez kullanmak birden çok HTTP çağrısını tetikler. Bir kez abone olmak için as söz dizimini kullanın.

<!-- one subscription, reused as "user" -->
<div *ngIf="user$ | async as user">
  <p>{{ user.name }}</p>
  <p>{{ user.email }}</p>
</div>

Yeni Denetim Akışıyla

Modern Angular'da aynı tek abonelik desenini kullanmak için @if ile as kullanın.

@if (user$ | async; as user) {
  <p>{{ user.name }}</p>
  <p>{{ user.email }}</p>
}

Bekleme Sırasında Null

İlk yayımdan önce async, null üretir. Yüklenme durumunu açıkça ele alın.

@if (data$ | async; as data) {
  <list [items]="data" />
} @else {
  <p>Loading...</p>
}

Elle Abonelikten Çıkmak Gerekmez

Pipe, yok edilme sırasında otomatik olarak abonelikten çıkar ve bir bellek sızıntısı sınıfını tamamen ortadan kaldırır. Bu nedenle şablonlarda observable tüketmenin tercih edilen yoludur.

Observable'ları Değiştirme

Bağlı observable başvurusu değişirse async pipe eskisinden abonelikten çıkar ve yenisine otomatik olarak abone olur.

search(term: string) {
  this.results$ = this.http.get('/api/search?q=' + term);
  // async pipe swaps subscriptions for you
}

BehaviorSubject ile async Pipe

BehaviorSubject servisini async pipe ile birlikte kullanmak, elle abonelik kodu yazmadan temiz bir reaktif kullanıcı arayüzü sağlar.

// service: readonly count$ = this.subject.asObservable();
// template: <span>{{ count$ | async }}</span>

async Pipe ve toSignal Karşılaştırması

Her ikisi de abonelikleri otomatik olarak yönetir. async pipe şablonda yaşar; toSignal() ise değeri bileşen koduna sinyal olarak getirir. Seçiminizi değere nerede ihtiyaç duyduğunuza göre yapın.

import { toSignal } from '@angular/core/rxjs-interop';
user = toSignal(this.http.get('/api/me'));
// template: {{ user()?.name }}

En İyi Uygulama Özeti

Bileşenlerde elle abonelik yerine async pipe'ı (veya toSignal'ı) tercih edin. Yinelenen aboneliklerden kaçınmak için as kullanın ve ilk null/yüklenme durumunu her zaman ele alın.

Kısa Kontrol

async pipe hakkındaki anlayışınızı sınayın.

Özet: async Pipe

async pipe şablonda abone olur ve yok edilme sırasında temizlenir.

Bir kez abone olmak için as kullanın (@if veya *ngIf ile).
İlk yayımdan önce null üretir; yüklenme durumunu ele alın.
Şablonlarda elle yapılan aboneliklere göre tercih edilir.

RxJS Fundamentals kursunu tamamladınız.

Sıkça Sorulan Sorular

“async Pipe'ı” dersi ücretsiz mi?

Evet — “async Pipe'ı” 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.

“async Pipe'ı” dersinde ne öğreneceğim?

El ile temizleme yapmadan şablonlarda abone olun. 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.

“async Pipe'ı” 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