Kā izmantot izvades dekoratoru leņķiskā režīmā

Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju. Lasīt vairāk.

Programmā Angular tīmekļa lapā var būt daudz dažādu atkārtoti lietojamu komponentu. Katrs komponents parasti satur savu TypeScript loģiku, HTML veidni un CSS stilu.

aveņu pi 3 b vs b+

Varat arī atkārtoti izmantot komponentus citos komponentos. Šādā gadījumā varat izmantot izvades dekoratoru, lai nosūtītu informāciju no pakārtotā komponenta atpakaļ uz tā vecākkomponentu.

Varat arī izmantot izvades dekoratoru, lai noklausītos notikumus, kas notiek bērna komponentā.

Kā pievienot izvades dekoratoru bērnu komponentam

Pirmkārt, jums būs jāizveido jauna Angular lietotne ar vecākkomponentu un pakārtoto komponentu.

Kad ir izveidots vecāka un bērna komponents, varat izmantot izvades dekorētāju, lai pārsūtītu datus un klausītos notikumus starp abiem komponentiem.

Izveidojiet jaunu Leņķiskais pielietojums . Pēc noklusējuma 'lietotne' ir saknes komponenta nosaukums. Šajā komponentā ir iekļauti trīs galvenie faili: 'app.component.html', 'app.component.css' un 'app.component.ts'.
Šajā piemērā “lietotnes” komponents darbosies kā vecākais komponents. Aizstāt visu “app.component.html” saturu ar šādu:
```
 <div class="parent-component"> 
  <h1> This is the parent component </h1> 
</div>
```

Pievienojiet dažus stilus vecāklietotnes komponentam “app.component.css”:

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

Izmantojiet komandu 'ng generate komponent', lai izveidot jaunu Angular komponentu sauc par 'datu komponentu'. Šajā piemērā 'datu komponents' apzīmēs pakārtoto komponentu.
```
 ng g c data-component
```
Pievienojiet saturu pakārtotajam komponentam “data-component.component.html”. Aizstājiet pašreizējo saturu, lai pievienotu jaunu pogu. Saistiet pogu ar funkciju, kas darbosies, kad lietotājs uz tās noklikšķinās:
```
 <div class="child-component"> 
  <p> This is the child component </p> 
  <button (click)="onButtonClick()">Click me</button> 
</div>
```

Pievienojiet dažus stilus pakārtotajam komponentam failā “data-component.component.css”:

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

Pievienojiet funkciju onButtonClick() komponenta TypeScript failam failā 'data-component.component.ts':
```
 onButtonClick() { 
}
```
Joprojām TypeScript failā pievienojiet 'Output' un 'EventEmitter' importēšanas sarakstam:
```
 import { Component, Output, EventEmitter, OnInit } from '@angular/core';
```
Klasē DataComponentComponent deklarējiet komponenta izvades mainīgo ar nosaukumu 'buttonWasClicked'. Tas būs EventEmitter. EventEmitter ir iebūvēta klase, kas ļauj informēt citu komponentu, kad notiek notikums.
```
 export class DataComponentComponent implements OnInit { 
  @Output() buttonWasClicked = new EventEmitter<void>(); 
  // ... 
}
```
Funkcijas onButtonClick() iekšpusē izmantojiet notikumu emitētāju 'buttonWasClicked'. Kad lietotājs noklikšķina uz pogas, datu komponents nosūtīs šo notikumu vecāklietotnes komponentam.
```
 onButtonClick() { 
    this.buttonWasClicked.emit(); 
}
```

Kā klausīties notikumus bērnu komponentā no vecāku komponenta

Lai izmantotu pakārtotā komponenta rekvizītu Output, jums būs jānoklausās vecāka komponenta emitētais notikums.

Izmantojiet pakārtoto komponentu, kas atrodas “app.component.html”. Veidojot HTML tagu, kā rekvizītu varat pievienot izvadi 'buttonWasClicked'. Saistiet notikumu ar jaunu funkciju.
```
 <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked()"></app-data-component>
```
Sadaļā “app.component.ts” pievienojiet jauno funkciju, lai apstrādātu pogas klikšķa notikumu, kad tas notiek pakārtotajā komponentā. Izveidojiet ziņojumu, kad lietotājs noklikšķina uz pogas.
```
 message: string = "" 
 
buttonInChildComponentWasClicked() { 
    this.message = 'The button in the child component was clicked'; 
}
```
Parādiet ziņojumu “app.component.html”:
```
 <p>{{message}}</p>
```
Ierakstiet terminālī komandu 'ng serve', lai palaistu savu Angular lietojumprogrammu. Atveriet to tīmekļa pārlūkprogrammā vietnē localhost:4200. Vecāku un bērnu komponenti izmanto dažādas fona krāsas, lai tos būtu vieglāk atšķirt.
Noklikšķiniet uz Noklikšķiniet uz manis pogu. Pakārtotais komponents nosūtīs notikumu vecākkomponentam, kas parādīs ziņojumu.

Kā nosūtīt datus no bērnu komponenta uz vecāku komponentu

Varat arī nosūtīt datus no pakārtotā komponenta uz vecākkomponentu.

kā pats izveidot minecraft modifikācijas

Sadaļā “data-component.component.ts” pievienojiet mainīgo, lai saglabātu virkņu sarakstu, kurā ir daži dati.
```
 listOfPeople: string[] = ['Joey', 'John', 'James'];
```
Mainiet pogasWasClicked notikumu emitētāja atgriešanas veidu. Mainiet to no tukšuma uz virkni[], lai atbilstu to virkņu sarakstam, kuras norādījāt iepriekšējā darbībā:
```
 @Output() buttonWasClicked = new EventEmitter<string[]>();
```
Modificējiet funkciju onButtonClick(). Nosūtot notikumu uz vecākkomponentu, pievienojiet datus kā argumentu funkcijai emit():
```
 onButtonClick() { 
    this.buttonWasClicked.emit(this.listOfPeople); 
}
```
Sadaļā “app.component.html” mainiet tagu “app-data-component”. Pievienojiet '$event' funkcijai buttonInChildComponentWasClicked(). Tas satur datus, kas nosūtīti no bērna komponenta.
```
 <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked($event)"></app-data-component>
```

Atjauniniet funkciju “app.component.ts”, lai pievienotu parametru datiem:

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

Pievienojiet jaunu mainīgo ar nosaukumu 'data', lai saglabātu datus, kas nāk no pakārtotā komponenta:

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

Rādīt datus HTML lapā:
```
 <p>{{data.join(', ')}}</p>
```
Ierakstiet terminālī komandu 'ng serve', lai palaistu savu Angular lietojumprogrammu. Atveriet to tīmekļa pārlūkprogrammā vietnē localhost:4200.
Noklikšķiniet uz Noklikšķiniet uz manis pogu. Pakārtotais komponents nosūtīs datus no bērna komponenta uz vecākkomponentu.

Datu nosūtīšana uz citām sastāvdaļām, izmantojot izvades dekoratoru

Ir arī citi dekoratori, kurus varat izmantot Angular, piemēram, ievades dekorators vai komponentu dekorators. Varat uzzināt vairāk par to, kā izmantot citus Angular dekoratorus, lai vienkāršotu kodu.