Kako uporabljati izhodni dekorater v Angular

Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

V Angularju lahko spletna stran vsebuje veliko različnih komponent za večkratno uporabo. Vsaka komponenta običajno vsebuje lastno logiko TypeScript, predlogo HTML in slog CSS.

Komponente lahko ponovno uporabite tudi znotraj drugih komponent. V tem primeru lahko uporabite izhodni dekorater za pošiljanje informacij iz podrejene komponente nazaj v njeno nadrejeno komponento.

Izhodni dekorater lahko uporabite tudi za poslušanje dogodkov, ki se zgodijo v podrejeni komponenti.

ali je mogoče moj telefon vdreti prek bluetootha

Kako dodati izhodni dekorater podrejeni komponenti

Najprej boste morali ustvariti novo aplikacijo Angular z nadrejeno komponento in podrejeno komponento.

Ko imate nadrejeno in podrejeno komponento, lahko uporabite izhodni dekorater za prenos podatkov in poslušanje dogodkov med komponentama.

Ustvari novo Kotna aplikacija . Privzeto je »app« ime korenske komponente. Ta komponenta vključuje tri glavne datoteke: 'app.component.html', 'app.component.css' in 'app.component.ts'.
V tem primeru bo komponenta »app« delovala kot nadrejena komponenta. Zamenjajte vso vsebino v »app.component.html« z naslednjim:
```
 <div class="parent-component"> 
  <h1> This is the parent component </h1> 
</div>
```

Dodajte nekaj sloga nadrejeni komponenti aplikacije v »app.component.css«:

 .parent-component { 
  font-family: Arial, Helvetica, sans-serif; 
  background-color: lightcoral; 
  padding: 20px 
}

Uporabite ukaz 'ng generiraj komponento' za ustvarite novo komponento Angular imenovano 'podatkovna komponenta'. V tem primeru bo 'podatkovna komponenta' predstavljala podrejeno komponento.
```
 ng g c data-component
```
Dodajte vsebino podrejeni komponenti v 'data-component.component.html'. Zamenjajte trenutno vsebino, da dodate nov gumb. Povežite gumb s funkcijo, ki se bo zagnala, ko uporabnik klikne nanj:
```
 <div class="child-component"> 
  <p> This is the child component </p> 
  <button (click)="onButtonClick()">Click me</button> 
</div>
```

Dodajte nekaj sloga podrejeni komponenti v 'data-component.component.css':

 .child-component { 
  font-family: Arial, Helvetica, sans-serif; 
  background-color: lightblue; 
  margin: 20px; 
  padding: 20px 
}

Dodajte funkcijo onButtonClick() v datoteko TypeScript za komponento v 'data-component.component.ts':
```
 onButtonClick() { 
}
```
Še vedno znotraj datoteke TypeScript dodajte »Output« in »EventEmitter« na seznam uvozov:
```
 import { Component, Output, EventEmitter, OnInit } from '@angular/core';
```
Znotraj razreda DataComponentComponent deklarirajte izhodno spremenljivko za komponento z imenom 'buttonWasClicked'. To bo EventEmitter. EventEmitter je vgrajeni razred, ki vam omogoča, da obvestite drugo komponento, ko se zgodi dogodek.
```
 export class DataComponentComponent implements OnInit { 
  @Output() buttonWasClicked = new EventEmitter<void>(); 
  // ... 
}
```
Uporabite oddajnik dogodkov 'buttonWasClicked' znotraj funkcije onButtonClick(). Ko uporabnik klikne gumb, podatkovna komponenta pošlje ta dogodek nadrejeni komponenti aplikacije.
```
 onButtonClick() { 
    this.buttonWasClicked.emit(); 
}
```

Kako poslušati dogodke v podrejeni komponenti iz nadrejene komponente

Če želite uporabiti izhodno lastnost podrejene komponente, boste morali poslušati oddani dogodek iz nadrejene komponente.

zakaj moje sporočilo ne deluje

Uporabite podrejeno komponento znotraj »app.component.html«. Izhod 'buttonWasClicked' lahko dodate kot lastnost pri ustvarjanju oznake HTML. Povežite dogodek z novo funkcijo.
```
 <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked()"></app-data-component>
```
Znotraj »app.component.ts« dodajte novo funkcijo za obravnavo dogodka klika gumba, ko se zgodi v podrejeni komponenti. Ustvarite sporočilo, ko uporabnik klikne na gumb.
```
 message: string = "" 
 
buttonInChildComponentWasClicked() { 
    this.message = 'The button in the child component was clicked'; 
}
```
Prikaži sporočilo v 'app.component.html':
```
 <p>{{message}}</p>
```
Vnesite ukaz 'ng serve' v terminal, da zaženete aplikacijo Angular. Odprite ga v spletnem brskalniku na localhost:4200. Nadrejena in podrejena komponenta uporabljata različne barve ozadja, da jih je lažje razlikovati.
Kliknite na Kliknite me gumb. Podrejena komponenta bo poslala dogodek nadrejeni komponenti, ki bo prikazala sporočilo.

Kako poslati podatke iz podrejene komponente v nadrejeno komponento

Prav tako lahko pošljete podatke iz podrejene komponente v nadrejeno komponento.

V 'data-component.component.ts' dodajte spremenljivko za shranjevanje seznama nizov, ki vsebujejo nekaj podatkov.
```
 listOfPeople: string[] = ['Joey', 'John', 'James'];
```
Spremenite vrsto povratka oddajnika dogodkov buttonWasClicked. Spremenite ga iz void v string[], da se ujema s seznamom nizov, ki ste jih navedli v prejšnjem koraku:
```
 @Output() buttonWasClicked = new EventEmitter<string[]>();
```
Spremenite funkcijo onButtonClick(). Ko pošiljate dogodek nadrejeni komponenti, dodajte podatke kot argument v funkcijo emit():
```
 onButtonClick() { 
    this.buttonWasClicked.emit(this.listOfPeople); 
}
```
V »app.component.html« spremenite oznako »app-data-component«. Dodajte '$event' v funkcijo buttonInChildComponentWasClicked(). To vsebuje podatke, poslane iz podrejene komponente.
```
 <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked($event)"></app-data-component>
```

Posodobite funkcijo v »app.component.ts«, da dodate parameter za podatke:

 buttonInChildComponentWasClicked(dataFromChild: string[]) { 
    this.message = 'The button in the child component was clicked'; 
}

Dodajte novo spremenljivko, imenovano 'podatki', za shranjevanje podatkov, ki prihajajo iz podrejene komponente:

 message: string = "" 
data: string[] = [] 
 
buttonInChildComponentWasClicked(dataFromChild: string[]) { 
    this.message = 'The button in the child component was clicked'; 
    this.data = dataFromChild; 
}

Prikaži podatke na strani HTML:
```
 <p>{{data.join(', ')}}</p>
```
Vnesite ukaz 'ng serve' v terminal, da zaženete aplikacijo Angular. Odprite ga v spletnem brskalniku na localhost:4200.
Kliknite na Kliknite me gumb. Podrejena komponenta bo poslala podatke iz podrejene komponente nadrejeni komponenti.

Pošiljanje podatkov drugim komponentam z izhodnim dekoratorjem

Obstajajo tudi drugi dekoraterji, ki jih lahko uporabite v Angularju, na primer dekorator Input ali Component dekorator. Izvedete lahko več o tem, kako lahko uporabite druge dekoratorje v Angularju za poenostavitev kode.