Angular Academy · Ders

output() ile Çıktılar

Yeni output API ile olaylar yayınlayın.

output() ile Çıktılar, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 3. 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.

Sinyal Çağı Çıktıları

Modern Angular, sinyal girdilerinin yanında bileşen olaylarını tanımlamak için klasik @Output ile EventEmitter'ın yerini alan output() işlevini sunar.

Çıktı Tanımlama

Bileşenin yayabileceği bir olay oluşturmak için output() işlevini çağırın. Veri yükü için genel bir tür belirtin.

import { Component, output } from "@angular/core";

@Component({ selector: "app-counter", template: "" })
export class CounterComponent {
  changed = output<number>();
}

Olay Yayma

Dinleyicilere bir değer göndermek için çıktı üzerinde emit çağırın.

export class CounterComponent {
  changed = output<number>();
  count = 0;
  inc() {
    this.count++;
    this.changed.emit(this.count);
  }
}

Üst Bileşenden Dinleme

Üst bileşen, olay bağlamasıyla abone olur ve yayılan veri yükü için $event kullanır.

<app-counter (changed)="onChange($event)"></app-counter>

// parent
onChange(value: number) {
  this.total = value;
}

Veri Yükü Olmayan Çıktılar

Veri taşımayan olaylar için output<void>() kullanın ve bağımsız değişken olmadan yayınlayın.

closed = output<void>();

close() {
  this.closed.emit();
}

output ve EventEmitter

output() API'si daha basittir ve RxJS'e bağlı değildir. Bir EventEmitter örneği oluşturmazsınız; bunu işlev sizin için yapar.

// classic:
@Output() changed = new EventEmitter<number>();

// modern:
changed = output<number>();

Çıktıya Diğer Ad Verme

alias seçeneğiyle farklı bir genel olay adı sunabilirsiniz.

valueChange = output<number>({ alias: "change" });

<!-- parent listens with the alias -->
<app-counter (change)="onChange($event)"></app-counter>

Çıktılar ve İki Yönlü Bağlama

Bir input ile xChange adlı bir output'u eşleştirmek iki yönlü bağlamayı etkinleştirir; ancak model() bunu daha kısa yoldan yapar.

value = input(0);
valueChange = output<number>();
// enables [(value)] on the parent

Gözlemlenebilirlerden Çıktı Türetme

Birlikte çalışabilirlik yardımcısı outputFromObservable, bir Gözlemlenebilir'i çıktıya dönüştürerek RxJS akışlarını yeni API'ye bağlar.

import { outputFromObservable } from "@angular/core/rxjs-interop";

clicks = outputFromObservable(this.clicks$);

Tür Güvenliği

Çıktılar türlendirildiğinden üst bileşendeki işleyici parametresi yayılan veri yükünün türüne göre denetlenir ve uyumsuzluklar derleme zamanında yakalanır.

selected = output<{ id: number }>();

<!-- parent must accept { id: number } -->
<app-list (selected)="pick($event)"></app-list>

output Ne Zaman Kullanılmalı

Yeni bileşenler için output() işlevini tercih edin: daha hafiftir, tür güvenlidir ve bileşen iletişimini modellemek üzere sinyal girdileriyle doğal biçimde eşleşir.

Hızlı Kontrol

Çıktı işleviyle ilgili anlayışınızı sınayın.

Özet

output() işlevi, EventEmitter olmadan türlendirilmiş olaylar tanımlar. emit() ile yayınlayın, olay bağlaması ve $event ile dinleyin, gerektiğinde diğer ad verin ve temiz bir bileşen iletişimi için sinyal girdileriyle eşleştirin.

Sıkça Sorulan Sorular

“output() ile Çıktılar” dersi ücretsiz mi?

Evet — “output() ile Çıktılar” 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.

“output() ile Çıktılar” dersinde ne öğreneceğim?

Yeni output API ile olaylar yayınlayı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 3. dersidir.

“output() ile Çıktılar” 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