Angular Academy · Oppitunti

Tulosteet output()-funktiolla

Lähettäkää tapahtumia uuden output-rajapinnan avulla.

Oppitunti 3/413 vaihetta

Tulosteet output()-funktiolla on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Signaaliajan outputit

Signaali-inputien lisäksi moderni Angular tarjoaa output()-funktion komponentin tapahtumien määrittämiseen. Se korvaa perinteisen @Output-dekoraattorin ja EventEmitter-olion.

Outputin määrittäminen

Kutsu output()-funktiota luodaksesi tapahtuman, jonka komponentti voi lähettää. Anna geneerinen tyyppi tapahtuman datalle.

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

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

Tapahtuman lähettäminen

Kutsu outputin emit-metodia lähettääksesi arvon kuuntelijoille.

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

Kuunteleminen parent-komponentista

Parent-komponentti tilaa tapahtuman event binding -sidonnalla ja käyttää lähetettyyn dataan viittaamiseen $event-muuttujaa.

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

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

Outputit ilman dataa

Käytä dataa sisältämättömiin tapahtumiin muotoa output<void>() ja kutsu emit-toimintoa ilman argumenttia.

closed = output<void>();

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

output ja EventEmitter

output()-rajapinta on yksinkertaisempi eikä ole sidottu RxJS:ään. Sinun ei tarvitse luoda EventEmitter-instanssia, koska funktio tekee sen puolestasi.

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

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

Outputin aliaksen määrittäminen

Ota käyttöön eri julkinen tapahtumanimi alias-option avulla.

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

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

Outputit ja kaksisuuntainen sidonta

input- ja xChange-nimisen output-funktion yhdistäminen mahdollistaa kaksisuuntaisen sidonnan, vaikka model() tekee sen tiiviimmin.

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

Outputien johtaminen Observable-olioista

Interop-apufunktio outputFromObservable muuttaa Observablen outputiksi ja yhdistää RxJS-virrat uuteen rajapintaan.

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

clicks = outputFromObservable(this.clicks$);

Tyyppiturvallisuus

Koska outputit ovat tyypitettyjä, parent-komponentin käsittelijän parametrin tyyppi tarkistetaan lähetetyn datan tyyppiä vasten. Näin ristiriidat havaitaan käännöksen aikana.

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

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

Milloin outputia käytetään

Suosi uusissa komponenteissa output()-funktiota: se on kevyempi ja tyyppiturvallinen, ja se sopii luonnollisesti yhteen signaali-inputien kanssa komponenttien välisen viestinnän mallintamiseen.

Pikatarkistus

Testaa, miten hyvin ymmärrät output-funktion.

Vastaa interaktiivisessa oppitunnissa

Kertaus

output()-funktio määrittää tyypitettyjä tapahtumia ilman EventEmitter-oliota. Lähetä tapahtumia emit()-kutsulla, kuuntele niitä event binding -sidonnalla ja $event-muuttujalla, anna tarvittaessa alias ja yhdistä outputit signaali-inputeihin selkeää komponenttien välistä viestintää varten.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 38
Oppitunnit: 144

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Tulosteet output()-funktiolla” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Tulosteet output()-funktiolla”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Tulosteet output()-funktiolla”?

Lähettäkää tapahtumia uuden output-rajapinnan avulla. Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Tulosteet output()-funktiolla”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?

Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Angular Academy