Output Decoratorin käyttäminen Angularissa

Angularissa verkkosivu voi sisältää monia erilaisia ​​uudelleenkäytettäviä komponentteja. Jokainen komponentti sisältää yleensä oman TypeScript-logiikkansa, HTML-mallinsa ja CSS-tyylinsä.

Voit myös käyttää uudelleen komponentteja muiden komponenttien sisällä. Tässä tapauksessa voit käyttää Output-decoratoria lähettääksesi tietoja alakomponentista takaisin sen pääkomponenttiin.

Voit myös käyttää Output-dekoraattoria kuunnellaksesi alikomponentissa tapahtuvia tapahtumia.

Tulosteen koristelun lisääminen lapsikomponenttiin

Ensin sinun on luotava uusi Angular-sovellus, jossa on yläkomponentti ja alakomponentti.

Kun sinulla on ylä- ja alakomponentti, voit käyttää Output-dekoraattoria tietojen siirtämiseen ja tapahtumien kuuntelemiseen näiden kahden komponentin välillä.

1. Luoda uusi Kulmasovellus. Oletuksena "app" on juurikomponentin nimi. Tämä komponentti sisältää kolme päätiedostoa: "app.component.html", "app.component.css" ja "app.component.ts".
2. Tässä esimerkissä "sovellus"-komponentti toimii pääkomponenttina. Korvaa kaikki "app.component.html"-tiedoston sisältö seuraavalla:

   <divluokkaa="emokomponentti">
   <h1> Tämä on pääkomponentti h1>
   div>

3. Lisää tyyliä yläsovelluksen komponenttiin "app.component.css":ssä:

   .parent-komponentti {
   font-perhe: Arial, Helvetica, sans-serif;
   taustaväri: valokoralli;
   pehmuste: 20px
   }

4. Käytä "ng generoida komponentti" -komentoa Luo uusi Angular-komponentti kutsutaan "tietokomponentiksi". Tässä esimerkissä "data-komponentti" edustaa alikomponenttia.

   ng g c datakomponentti

5. Lisää sisältöä alikomponenttiin tiedostossa "data-component.component.html". Korvaa nykyinen sisältö lisätäksesi uuden painikkeen. Sido painike toimintoon, joka käynnistyy, kun käyttäjä napsauttaa sitä:

   <divluokkaa="lapsikomponentti">
   <s> Tämä on lapsikomponentti s>
   <-painiketta (klikkaus)="onButtonClick()">Napsauta minua-painiketta>
   div>

6. Lisää tyyliä alikomponenttiin tiedostossa "data-component.component.css":

   .lapsikomponentti {
   font-perhe: Arial, Helvetica, sans-serif;
   taustaväri: vaaleansininen;
   marginaali: 20px;
   pehmuste: 20px
   }

7. Lisää onButtonClick()-funktio komponentin TypeScript-tiedostoon "data-component.component.ts":

   onButtonClick() {
   }

8. Lisää edelleen TypeScript-tiedoston sisällä "Output" ja "EventEmitter" tuontiluetteloon:

   tuonti { Komponentti, Lähtö, Tapahtumalähettäjä, OnInit } alkaen'@kulma/ydin';

9. Määritä DataComponentComponent-luokassa Output-muuttuja komponentille nimeltä "buttonWasClicked". Tästä tulee EventEmitter. EventEmitter on sisäänrakennettu luokka, jonka avulla voit ilmoittaa toiselle komponentille, kun tapahtuma tapahtuu.

   viedäluokkaa DataComponentComponent toteuttaa OnInit {
   @Tulos()-painikettaKlikkattiin = Uusi Tapahtumalähettäjä<mitätön>();
   // ...
   }

10. Käytä "buttonWasClicked" -tapahtumalähetintä onButtonClick()-funktion sisällä. Kun käyttäjä napsauttaa painiketta, datakomponentti lähettää tämän tapahtuman pääsovelluskomponenttiin.

    onButtonClick() {
    Tämä.buttonWasClicked.emit();
    }

Lapsikomponentin tapahtumien kuunteleminen yläkomponentista

Jos haluat käyttää alikomponentin Output-ominaisuutta, sinun on kuunneltava pääkomponentin lähettämää tapahtumaa.

1. Käytä "app.component.html" -tiedoston alikomponenttia. Voit lisätä "buttonWasClicked"-tulosteen ominaisuutena luodessasi HTML-tunnistetta. Sido tapahtuma uuteen funktioon.

   <app-data-komponentti (painikettaKlikkattiin)="buttonInChildComponentWasClicked()">app-data-komponentti>

2. Lisää "app.component.ts" -kohtaan uusi toiminto, joka käsittelee painikkeen napsautustapahtumaa, kun se tapahtuu alikomponentissa. Luo viesti, kun käyttäjä napsauttaa painiketta.

   viesti: merkkijono = ""
   buttonInChildComponentWasClicked() {
   Tämä.viesti = "Alikomponentin painiketta napsautettiin";
   }

3. Näytä viesti tiedostossa "app.component.html":

   <s>{{viesti}}s>

4. Suorita Angular-sovellus kirjoittamalla "ng serve" -komento terminaaliin. Avaa se verkkoselaimella osoitteessa localhost: 4200. Pää- ja lapsikomponentit käyttävät erilaisia ​​taustavärejä, jotta ne on helpompi erottaa toisistaan.
5. Klikkaa Napsauta minua -painiketta. Alikomponentti lähettää tapahtuman pääkomponentille, joka näyttää viestin.

Tietojen lähettäminen lapsikomponentista yläkomponenttiin

Voit myös lähettää tietoja alikomponentista pääkomponenttiin.

1. Lisää kohtaan "data-component.component.ts" muuttuja, joka tallentaa tietoja sisältävien merkkijonojen luettelon.

   luettelo henkilöistä: merkkijono[] = ["Joey", "John", 'James'];

2. Muokkaa buttonWasClicked-tapahtumalähettimen palautustyyppiä. Muuta se voidista merkkijonoksi[], jotta se vastaa edellisessä vaiheessa ilmoittamaasi merkkijonoluetteloa:

   @Tulos()-painikettaKlikkattiin = Uusi Tapahtumalähettäjä<merkkijono[]>();

3. Muokkaa onButtonClick()-funktiota. Kun lähetät tapahtuman pääkomponenttiin, lisää tiedot argumenttina emit()-funktioon:

   onButtonClick() {
   Tämä.buttonWasClicked.emit(Tämä.listOfPeople);
   }

4. Muokkaa "app.component.html" -tunnistetta "app-data-component". Lisää "$event" buttonInChildComponentWasClicked() -funktioon. Tämä sisältää alikomponentista lähetetyt tiedot.

   <app-data-komponentti (painikettaKlikkattiin)="buttonInChildComponentWasClicked($event)">app-data-komponentti>

5. Päivitä funktio tiedostossa "app.component.ts" lisätäksesi parametrin tiedoille:

   painikettaInChildComponentClicked (dataFromChild: merkkijono[]) {
   Tämä.viesti = "Alikomponentin painiketta napsautettiin";
   }

6. Lisää uusi muuttuja nimeltä "data" tallentaaksesi alikomponentista tulevat tiedot:

   viesti: merkkijono = ""
   tiedot: merkkijono[] = []
   painikettaInChildComponentClicked (dataFromChild: merkkijono[]) {
   Tämä.viesti = "Alikomponentin painiketta napsautettiin";
   Tämä.data = dataFromChild;
   }

7. Näytä tiedot HTML-sivulla:

   <s>{{data.join(', ')}}s>

8. Suorita Angular-sovellus kirjoittamalla "ng serve" -komento terminaaliin. Avaa se verkkoselaimella osoitteessa localhost: 4200.
9. Klikkaa Napsauta minua -painiketta. Lapsikomponentti lähettää tiedot alikomponentista pääkomponenttiin.

Tietojen lähettäminen muille komponenteille Output Decoratorin avulla

Angularissa voit käyttää muitakin koristeita, kuten Input-sisustimen tai Komponenttisisustimen. Saat lisätietoja siitä, kuinka voit käyttää muita Angularin sisustajia koodin yksinkertaistamiseksi.