A kimeneti dekorátor használata szögben

Az Angular-ban egy weboldal sok különböző újrafelhasználható komponenst tartalmazhat. Minden összetevő általában saját TypeScript-logikát, HTML-sablont és CSS-stílust tartalmaz.

Az alkatrészeket más alkatrészeken belül is újra felhasználhatja. Ebben az esetben a Kimenet-dekorátor segítségével információkat küldhet vissza egy gyermekkomponensről a szülőkomponensre.

A Kimenet-dekorátor segítségével meghallgathatja a gyermekkomponensben előforduló eseményeket is.

Hogyan adjuk hozzá a kimeneti dekorátort egy gyermekkomponenshez

Először is létre kell hoznia egy új Angular alkalmazást szülő- és gyermekkomponenssel.

Ha van szülő- és gyermekkomponens, a Kimenet-dekorátorral adatokat vihet át, és meghallgathatja az eseményeket a két összetevő között.

1. Újat csinálni Szögletes alkalmazás. Alapértelmezés szerint az "app" a gyökérkomponens neve. Ez az összetevő három fő fájlt tartalmaz: "app.component.html", "app.component.css" és "app.component.ts".
2. Ebben a példában az „app” összetevő szülőkomponensként fog működni. Cserélje ki az "app.component.html" összes tartalmát a következőre:

   <divosztály="szülő komponens">
   <h1> Ez a szülő komponens h1>
   div>

3. Adjon hozzá stílust a szülőalkalmazás-összetevőhöz az „app.component.css” fájlban:

   .parent-component {
   betűtípus család: Arial, Helvetica, sans-serif;
   háttérszín: világoskorall;
   párnázás: 20px
   }

4. Használja az "ng generate component" parancsot hozzon létre egy új Angular komponenst "adat-összetevőnek" nevezik. Ebben a példában az "adat-összetevő" a gyermekkomponenst jelenti.

   ng g c adatkomponens

5. Adjon hozzá tartalmat a gyermekkomponenshez a "data-component.component.html" fájlban. Cserélje le az aktuális tartalmat új gomb hozzáadásához. Kösd a gombot egy funkcióhoz, amely akkor fut le, amikor a felhasználó rákattint:

   <divosztály="gyermek-komponens">
   <p> Ez a gyermekkomponens p>
   <gomb (kattintson)="onButtonClick()">Kattints idegomb>
   div>

6. Adjon hozzá némi stílust a gyermekkomponenshez a "data-component.component.css" fájlban:

   .gyermek-komponens {
   betűtípus család: Arial, Helvetica, sans-serif;
   háttérszín: világoskék;
   árrés: 20px;
   párnázás: 20px
   }

7. Adja hozzá az onButtonClick() függvényt az összetevő TypeScript fájljához a "data-component.component.ts" fájlban:

   onButtonClick() {
   }

8. Még mindig a TypeScript fájlban adja hozzá az "Output" és az "EventEmitter" elemet az importálási listához:

   import { Component, Output, EventEmitter, OnInit } tól től"@angular/core";

9. A DataComponentComponent osztályon belül deklaráljon egy kimeneti változót a "buttonWasClicked" nevű összetevőhöz. Ez egy EventEmitter lesz. Az EventEmitter egy beépített osztály, amely lehetővé teszi, hogy értesítsen egy másik összetevőt, amikor egy esemény megtörténik.

   exportosztály DataComponentComponent megvalósítja OnInit {
   @Kimenet() gombKattintott = új EventEmitter<üres>();
   // ...
   }

10. Használja a "buttonWasClicked" eseménykibocsátót az onButtonClick() függvényen belül. Amikor a felhasználó rákattint a gombra, az adatkomponens elküldi ezt az eseményt a szülőalkalmazás-összetevőnek.

    onButtonClick() {
    ez.buttonWasClicked.emit();
    }

Hogyan hallgathatja meg az eseményeket a gyermekkomponensben a szülő komponensből

A gyermekkomponens Output tulajdonságának használatához meg kell hallgatnia a szülőkomponens által kibocsátott eseményt.

1. Használja az "app.component.html" fájlban található gyermekkomponenst. A "buttonWasClicked" kimenetet tulajdonságként adhatja hozzá a HTML címke létrehozásakor. Kösd az eseményt egy új függvényhez.

   <app-data-komponens (gombra Kattintva)="buttonInChildComponentWasClicked()">app-data-komponens>

2. Az "app.component.ts" fájlba adja hozzá az új függvényt, amely kezeli a gombkattintási eseményt, amikor az az utódkomponensben történik. Hozzon létre egy üzenetet, amikor a felhasználó rákattint a gombra.

   üzenet: húr = ""
   buttonInChildComponentWasClicked() {
   ez.message = "A gyermekkomponens gombjára kattintottak";
   }

3. Jelenítse meg az üzenetet az "app.component.html" fájlban:

   <p>{{üzenet}}p>

4. Írja be az „ng serve” parancsot egy terminálba az Angular alkalmazás futtatásához. Nyissa meg egy webböngészőben a localhost: 4200 címen. A szülő és a gyermek összetevők különböző háttérszíneket használnak, hogy könnyebben megkülönböztethetők legyenek egymástól.
5. Kattintson a Kattints ide gomb. A gyermekkomponens elküldi az eseményt a szülőkomponensnek, amely megjeleníti az üzenetet.

Adatok küldése gyermekkomponensről szülő komponensre

Az utódkomponensből is küldhet adatokat a szülőkomponensnek.

1. A "data-component.component.ts" fájlhoz adjon hozzá egy változót, amely bizonyos adatokat tartalmazó karakterláncok listáját tárolja.

   Emberek listája: húr[] = ["Joey", 'János', 'James'];

2. Módosítsa a buttonWasClicked eseménykibocsátó visszatérési típusát. Módosítsa void-ról string[]-re, hogy megfeleljen az előző lépésben deklarált karakterláncok listájának:

   @Kimenet() gombKattintott = új EventEmitter<húr[]>();

3. Módosítsa az onButtonClick() függvényt. Amikor elküldi az eseményt a szülőkomponensnek, adja hozzá az adatokat argumentumként az emit() függvényhez:

   onButtonClick() {
   ez.buttonWasClicked.emit(ez.listOfPeople);
   }

4. Az "app.component.html" fájlban módosítsa az "app-data-component" címkét. Adja hozzá a "$event" elemet a buttonInChildComponentWasClicked() függvényhez. Ez tartalmazza a gyermekkomponenstől küldött adatokat.

   <app-data-komponens (gombra Kattintva)="buttonInChildComponentWasClicked($event)">app-data-komponens>

5. Frissítse az „app.component.ts” függvényt az adatok paraméterének hozzáadásához:

   gombInChildComponentWasclicked (dataFromChild: húr[]) {
   ez.message = "A gyermekkomponens gombjára kattintottak";
   }

6. Adjon hozzá egy "data" nevű új változót a gyermekkomponensből származó adatok tárolásához:

   üzenet: húr = ""
   adat: húr[] = []
   gombInChildComponentWasclicked (dataFromChild: húr[]) {
   ez.message = "A gyermekkomponens gombjára kattintottak";
   ez.data = dataFromChild;
   }

7. Az adatok megjelenítése a HTML oldalon:

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

8. Írja be az „ng serve” parancsot egy terminálba az Angular alkalmazás futtatásához. Nyissa meg egy webböngészőben a localhost: 4200 címen.
9. Kattintson a Kattints ide gomb. A gyermekkomponens elküldi az adatokat a gyermekkomponensből a szülőkomponensnek.

Adatok küldése más összetevőknek a kimeneti dekorátor segítségével

Vannak más dekorátorok is, amelyeket az Angularban használhat, például a bemeneti dekorátort vagy a komponens dekorátort. Többet megtudhat arról, hogyan használhat más dekorátorokat az Angularban a kód egyszerűsítésére.