Angular Academy · leksjon

Outputs med output()

Send ut hendelser med det nye output-API-et.

Leksjon 3 av 413 trinn

Outputs med output() er en gratis leksjon i Angular Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Angular Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Utdata i signalæraen

Ved siden av signalbaserte inndata tilbyr moderne Angular funksjonen output() for å deklarere komponenthendelser. Den erstatter den klassiske @Output med EventEmitter.

Deklarere et utdata

Kall output() for å opprette en hendelse som en komponent kan sende ut. Oppgi en generisk type for nyttelasten.

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

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

Sende ut en hendelse

Kall emit på utdataet for å sende en verdi til lyttere.

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

Lytte fra forelderen

Forelderen abonnerer med hendelsesbinding og bruker $event for nyttelasten som sendes ut.

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

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

Utdata uten nyttelast

For hendelser som ikke inneholder data, bruk output<void>() og send ut hendelsen uten argument.

closed = output<void>();

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

output kontra EventEmitter

API-et output() er enklere og ikke knyttet til RxJS. De oppretter ikke en forekomst av EventEmitter; funksjonen gjør det for Dem.

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

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

Gi et utdata et alias

Eksponer et annet offentlig hendelsesnavn med alternativet alias.

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

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

Utdata og toveisbinding

Ved å kombinere et input med et output kalt xChange aktiveres toveisbinding, selv om model() gjør dette mer konsist.

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

Avlede utdata fra Observables

Interop-hjelpefunksjonen outputFromObservable gjør en Observable om til et utdata og bygger bro mellom RxJS-strømmer og det nye API-et.

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

clicks = outputFromObservable(this.clicks$);

Typesikkerhet

Fordi utdata er typet, kontrolleres parameteren til forelderens behandlingsfunksjon mot typen til nyttelasten som sendes ut. Dermed oppdages avvik under kompilering.

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

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

Når bør De bruke output?

Foretrekk output() for nye komponenter: Det er enklere, typesikkert og passer naturlig sammen med signalbaserte inndata for å modellere kommunikasjon mellom komponenter.

Kort sjekk

Test forståelsen Deres av output-funksjonen.

Besvar den i den interaktive leksjonen

Oppsummering

Funksjonen output() deklarerer typede hendelser uten en EventEmitter. Send ut hendelser med emit(), lytt med hendelsesbinding og $event, gi alias ved behov, og kombiner med signalbaserte inndata for ryddig kommunikasjon mellom komponenter.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 38
Leksjoner: 144

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Outputs med output()» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Angular Academy, inkludert «Outputs med output()», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Outputs med output()»?

Send ut hendelser med det nye output-API-et. Du øver på Angular Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Angular Academy?

Ingen tidligere erfaring er nødvendig. Angular Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Outputs med output()»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Angular Academy-leksjonen?

Ja. Alle Angular Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Signalinput med input()
Påkrevde og transformerende inputverdier
Outputs med output()
Visningsspørringer med viewChild

← Tilbake til Angular Academy