Angular Academy · Lekcja

Wyjścia za pomocą output()

Emituj zdarzenia za pomocą nowego API output.

Lekcja 3 z 413 kroki

Wyjścia za pomocą output() to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Wyjścia w erze sygnałów

Oprócz wejść będących sygnałami nowoczesny Angular udostępnia funkcję output() do deklarowania zdarzeń komponentu, zastępując klasyczne @Output z EventEmitter.

Deklarowanie wyjścia

Wywołaj output(), aby utworzyć zdarzenie, które komponent może emitować. Podaj typ generyczny dla danych zdarzenia.

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

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

Emitowanie zdarzenia

Wywołaj emit na wyjściu, aby wysłać wartość do odbiorników.

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

Nasłuchiwanie w komponencie nadrzędnym

Komponent nadrzędny nasłuchuje za pomocą powiązania zdarzenia, używając $event do odczytania wyemitowanych danych.

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

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

Wyjścia bez danych

W przypadku zdarzeń, które nie przenoszą danych, użyj output<void>() i emituj je bez argumentu.

closed = output<void>();

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

output a EventEmitter

Interfejs API output() jest prostszy i nie jest powiązany z RxJS. Nie trzeba tworzyć instancji EventEmitter — funkcja robi to za Ciebie.

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

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

Aliasing wyjścia

Za pomocą opcji alias można udostępnić inną publiczną nazwę zdarzenia.

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

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

Wyjścia a wiązanie dwukierunkowe

Połączenie input z output o nazwie xChange umożliwia wiązanie dwukierunkowe, choć model() zapewnia to w bardziej zwięzły sposób.

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

Tworzenie wyjść na podstawie Observable

Pomocnicza funkcja interop outputFromObservable przekształca Observable w wyjście, łącząc strumienie RxJS z nowym interfejsem API.

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

clicks = outputFromObservable(this.clicks$);

Bezpieczeństwo typów

Ponieważ wyjścia mają określone typy, parametr obsługi w komponencie nadrzędnym jest sprawdzany względem typu emitowanych danych, co pozwala wykrywać niezgodności podczas kompilacji.

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

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

Kiedy używać output

W nowych komponentach preferuj output(): jest lżejsze, zapewnia bezpieczeństwo typów i naturalnie łączy się z wejściami będącymi sygnałami, ułatwiając komunikację komponentów.

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat funkcji output.

Odpowiedz w interaktywnej lekcji

Podsumowanie

Funkcja output() deklaruje typowane zdarzenia bez użycia EventEmitter. Emituj je za pomocą emit(), nasłuchuj przez powiązanie zdarzenia i $event, w razie potrzeby nadaj alias oraz łącz z wejściami będącymi sygnałami, aby zapewnić przejrzystą komunikację komponentów.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 38
Lekcje: 144

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Wyjścia za pomocą output()” jest bezpłatna?

Tak — pełny tekst „Wyjścia za pomocą output()” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Wyjścia za pomocą output()”?

Emituj zdarzenia za pomocą nowego API output. Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Wyjścia za pomocą output()”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Dane wejściowe sygnałów za pomocą input()
Wymagane i przekształcane dane wejściowe
Wyjścia za pomocą output()
Zapytania widoku za pomocą viewChild

← Powrót do Angular Academy