Kaip naudoti išvesties dekoratorių kampu

„Angular“ tinklalapyje gali būti daug skirtingų daugkartinio naudojimo komponentų. Kiekvienas komponentas paprastai turi savo „TypeScript“ logiką, HTML šabloną ir CSS stilių.

Taip pat galite pakartotinai naudoti komponentus kituose komponentuose. Tokiu atveju galite naudoti išvesties dekoratorių, norėdami siųsti informaciją iš antrinio komponento atgal į pagrindinį komponentą.

Taip pat galite naudoti išvesties dekoratorių, norėdami klausytis įvykių, vykstančių antriniame komponente.

Kaip pridėti išvesties dekoratorių prie vaiko komponento

Pirmiausia turėsite sukurti naują „Angular“ programą su pirminiu ir antriniu komponentu.

Kai turėsite pagrindinį ir antrinį komponentą, galite naudoti išvesties dekoratorių duomenims perkelti ir klausytis įvykių tarp dviejų komponentų.

1. Sukurti naują Kampinis pritaikymas. Pagal numatytuosius nustatymus „app“ yra šakninio komponento pavadinimas. Šį komponentą sudaro trys pagrindiniai failai: „app.component.html“, „app.component.css“ ir „app.component.ts“.
2. Šiame pavyzdyje komponentas „programa“ veiks kaip pagrindinis komponentas. Pakeiskite visą „app.component.html“ turinį taip:

   <divklasė="pagrindinis komponentas">
   <h1> Tai yra pirminis komponentas h1>
   div>

3. Pridėkite šiek tiek stiliaus prie pagrindinės programos komponento „app.component.css“:

   .parent-komponentas {
   šrifto šeima: Arial, Helvetica, be serifo;
   fono spalva: šviesus koralas;
   kamšalas: 20px
   }

4. Norėdami tai padaryti, naudokite komandą „ng generuoti komponentą“. sukurti naują kampinį komponentą vadinamas „duomenų komponentu“. Šiame pavyzdyje „duomenų komponentas“ žymės antrinį komponentą.

   ng g c duomenų komponentas

5. Pridėkite turinį prie antrinio komponento „data-component.component.html“. Pakeiskite esamą turinį, kad pridėtumėte naują mygtuką. Susiekite mygtuką su funkcija, kuri bus paleista vartotojui spustelėjus:

   <divklasė="vaikas komponentas">
   <p> Tai yra vaiko komponentas p>
   <mygtuką (spustelėkite)="onButtonClick()">Paspausk manemygtuką>
   div>

6. Pridėkite šiek tiek stiliaus antriniam komponentui „data-component.component.css“:

   .vaikas-komponentas {
   šrifto šeima: Arial, Helvetica, be serifo;
   fono spalva: šviesiai mėlynas;
   marža: 20px;
   kamšalas: 20px
   }

7. Pridėkite funkciją onButtonClick() prie komponento TypeScript failo, esančio "data-component.component.ts":

   onButtonClick() {
   }

8. Vis dar „TypeScript“ faile pridėkite „Output“ ir „EventEmitter“ prie importavimo sąrašo:

   importuoti { Komponentas, išvestis, įvykių skleidėjas, „OnInit“} iš„@kampinis/šerdis“;

9. „DataComponentComponent“ klasėje nurodykite komponento „buttonWasClicked“ išvesties kintamąjį. Tai bus EventEmitter. EventEmitter yra integruota klasė, leidžianti informuoti kitą komponentą, kai įvyksta įvykis.

   eksportuotiklasė DataComponentComponent padargai OnInit {
   @Išvestis() mygtukasBuvo spustelėtas = naujas Įvykių skleidėjas<tuštuma>();
   // ...
   }

10. Funkcijos onButtonClick() viduje naudokite įvykių skleidėją „buttonWasClicked“. Kai vartotojas spustelėja mygtuką, duomenų komponentas nusiųs šį įvykį pagrindinės programos komponentui.

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

Kaip klausytis vaikų komponento įvykių iš pagrindinio komponento

Norėdami naudoti antrinio komponento ypatybę Output, turėsite klausytis pirminio komponento skleidžiamo įvykio.

1. Naudokite antrinį komponentą „app.component.html“. Kurdami HTML žymą galite pridėti „buttonWasClicked“ išvestį kaip nuosavybę. Susieti įvykį su nauja funkcija.

   <programos duomenų komponentas (mygtukasBuvoSpustelėtas)="buttonInChildComponentWasClicked()">programos duomenų komponentas>

2. Į „app.component.ts“ pridėkite naują funkciją, skirtą mygtuko paspaudimo įvykiui valdyti, kai jis įvyksta antriniame komponente. Sukurkite pranešimą, kai vartotojas spustelėja mygtuką.

   žinutė: styga = ""
   buttonInChildComponentWasClicked() {
   tai.message = „Buvo paspaustas antrinio komponento mygtukas“;
   }

3. Rodyti pranešimą „app.component.html“:

   <p>{{message}}p>

4. Įveskite komandą „ng serve“ į terminalą, kad paleistumėte „Angular“ programą. Atidarykite jį žiniatinklio naršyklėje adresu localhost: 4200. Tėvų ir vaikų komponentai naudoja skirtingas fono spalvas, kad būtų lengviau juos atskirti.
5. Spustelėkite ant Paspausk mane mygtuką. Antrinis komponentas nusiųs įvykį pagrindiniam komponentui, kuris parodys pranešimą.

Kaip siųsti duomenis iš antrinio komponento į pagrindinį komponentą

Taip pat galite siųsti duomenis iš antrinio komponento į pirminį komponentą.

1. Į „data-component.component.ts“ pridėkite kintamąjį, kad išsaugotumėte eilučių, kuriose yra tam tikrų duomenų, sąrašą.

   Žmonių sąrašas: styga[] = ["Joey", "Jonas", "James"];

2. Pakeiskite mygtukoWasClicked įvykių emiterio grąžinimo tipą. Pakeiskite jį iš galiojimo į eilutę[], kad atitiktų eilučių sąrašą, kurį paskelbėte ankstesniame veiksme:

   @Išvestis() mygtukasBuvo spustelėtas = naujas Įvykių skleidėjas<styga[]>();

3. Pakeiskite funkciją onButtonClick(). Siųsdami įvykį pirminiam komponentui, pridėkite duomenis kaip argumentą į funkciją emit():

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

4. Skiltyje „app.component.html“ pakeiskite žymą „app-data-component“. Pridėkite „$event“ į funkciją buttonInChildComponentWasClicked(). Jame yra duomenys, išsiųsti iš antrinio komponento.

   <programos duomenų komponentas (mygtukasBuvoSpustelėtas)="buttonInChildComponentWasClicked($event)">programos duomenų komponentas>

5. Atnaujinkite funkciją „app.component.ts“, kad pridėtumėte duomenų parametrą:

   mygtukasInChildComponentWasClicked (dataFromChild: styga[]) {
   tai.message = „Buvo paspaustas antrinio komponento mygtukas“;
   }

6. Pridėkite naują kintamąjį pavadinimu „duomenys“, kad išsaugotumėte duomenis, gaunamus iš antrinio komponento:

   žinutė: styga = ""
   duomenys: styga[] = []
   mygtukasInChildComponentWasClicked (dataFromChild: styga[]) {
   tai.message = „Buvo paspaustas antrinio komponento mygtukas“;
   tai.data = dataFromChild;
   }

7. Rodyti duomenis HTML puslapyje:

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

8. Įveskite komandą „ng serve“ į terminalą, kad paleistumėte „Angular“ programą. Atidarykite jį žiniatinklio naršyklėje adresu localhost: 4200.
9. Spustelėkite ant Paspausk mane mygtuką. Antrinis komponentas siųs duomenis iš antrinio komponento pagrindiniam komponentui.

Duomenų siuntimas kitiems komponentams naudojant išvesties dekoratorių

Yra ir kitų dekoratorių, kuriuos galite naudoti kampe, pvz., įvesties dekoratorius arba komponentų dekoratorius. Galite sužinoti daugiau apie tai, kaip galite naudoti kitus Angular dekoratorius, kad supaprastintumėte kodą.