Paano Gamitin ang Output Decorator sa Angular

Ang mga mambabasang tulad mo ay tumutulong sa pagsuporta sa MUO. Kapag bumili ka gamit ang mga link sa aming site, maaari kaming makakuha ng isang affiliate na komisyon. Magbasa pa.

Sa Angular, maaaring maglaman ang isang web page ng maraming iba't ibang bahaging magagamit muli. Ang bawat bahagi ay karaniwang naglalaman ng sarili nitong TypeScript logic, HTML template, at CSS styling.

Maaari mo ring muling gamitin ang mga bahagi sa loob ng iba pang mga bahagi. Sa kasong ito, maaari mong gamitin ang Output decorator upang magpadala ng impormasyon mula sa isang child component pabalik sa parent component nito.

Maaari mo ring gamitin ang Output decorator para makinig sa mga kaganapang nagaganap sa child component.

Paano Idagdag ang Output Decorator sa isang Child Component

Una, kakailanganin mong gumawa ng bagong Angular app na may parent component at child component.

kung paano tanggalin ang isang naka-link na account

Kapag mayroon ka nang bahagi ng magulang at anak, maaari mong gamitin ang Output decorator upang maglipat ng data at makinig sa mga kaganapan sa pagitan ng dalawang bahagi.

Gumawa ng bago Angular na aplikasyon . Bilang default, ang 'app' ay ang pangalan ng root component. Kasama sa component na ito ang tatlong pangunahing file: 'app.component.html', 'app.component.css', at 'app.component.ts.'
Para sa halimbawang ito, ang 'app' na bahagi ay magsisilbing pangunahing bahagi. Palitan ang lahat ng content sa 'app.component.html' ng sumusunod:
```
 <div class="parent-component"> 
  <h1> This is the parent component </h1> 
</div>
```

Magdagdag ng ilang styling sa parent app component sa 'app.component.css':

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

Gamitin ang command na 'ng generate component' sa lumikha ng bagong bahagi ng Angular tinatawag na 'data-component'. Sa halimbawang ito, kakatawanin ng 'data-component' ang child component.
```
 ng g c data-component
```
Magdagdag ng content sa child component sa 'data-component.component.html'. Palitan ang kasalukuyang nilalaman upang magdagdag ng bagong button. Itali ang button sa isang function na tatakbo kapag nag-click dito ang user:
```
 <div class="child-component"> 
  <p> This is the child component </p> 
  <button (click)="onButtonClick()">Click me</button> 
</div>
```

Magdagdag ng ilang styling sa child component sa 'data-component.component.css':

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

Idagdag ang onButtonClick() function sa TypeScript file para sa component, sa 'data-component.component.ts':
```
 onButtonClick() { 
}
```
Sa loob pa rin ng TypeScript file, idagdag ang 'Output' at 'EventEmitter' sa listahan ng mga pag-import:
```
 import { Component, Output, EventEmitter, OnInit } from '@angular/core';
```
Sa loob ng klase ng DataComponentComponent, magdeklara ng Output variable para sa component na tinatawag na 'buttonWasClicked'. Ito ay magiging EventEmitter. Ang EventEmitter ay isang built-in na klase na nagbibigay-daan sa iyong ipaalam ang isa pang bahagi kapag may nangyaring kaganapan.
```
 export class DataComponentComponent implements OnInit { 
  @Output() buttonWasClicked = new EventEmitter<void>(); 
  // ... 
}
```
Gamitin ang 'buttonWasClicked' na event emitter sa loob ng onButtonClick() function. Kapag nag-click ang user sa button, ipapadala ng data-component ang kaganapang ito sa parent app component.
```
 onButtonClick() { 
    this.buttonWasClicked.emit(); 
}
```

Paano Makinig sa Mga Kaganapan sa Bahagi ng Bata Mula sa Bahagi ng Magulang

Para magamit ang Output property ng child component, kakailanganin mong pakinggan ang emitted event mula sa parent component.

Gamitin ang child component sa loob ng 'app.component.html'. Maaari mong idagdag ang 'buttonWasClicked' na output bilang isang property kapag gumagawa ng HTML tag. Itali ang kaganapan sa isang bagong function.
```
 <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked()"></app-data-component>
```
Sa loob ng 'app.component.ts', idagdag ang bagong function upang pangasiwaan ang kaganapan ng pag-click sa button kapag nangyari ito sa child component. Gumawa ng mensahe kapag nag-click ang user sa button.
```
 message: string = "" 
 
buttonInChildComponentWasClicked() { 
    this.message = 'The button in the child component was clicked'; 
}
```
Ipakita ang mensahe sa 'app.component.html':
```
 <p>{{message}}</p>
```
I-type ang command na 'ng serve' sa isang terminal para patakbuhin ang iyong Angular application. Buksan ito sa isang web browser sa localhost:4200. Gumagamit ang mga bahagi ng magulang at anak ng iba't ibang kulay ng background para mas madaling makilala ang mga ito.
Mag-click sa Pindutin mo ako pindutan. Ipapadala ng child component ang event sa parent component, na magpapakita ng mensahe.

Paano Magpadala ng Data Mula sa Isang Bahagi ng Bata patungo sa Isang Bahagi ng Magulang

Maaari ka ring magpadala ng data mula sa child component sa parent component.

Sa 'data-component.component.ts', magdagdag ng variable upang mag-imbak ng listahan ng mga string na naglalaman ng ilang data.
```
 listOfPeople: string[] = ['Joey', 'John', 'James'];
```
Baguhin ang uri ng pagbabalik ng buttonWasClicked event emitter. Baguhin ito mula void sa string[], upang tumugma sa listahan ng mga string na iyong idineklara sa nakaraang hakbang:
```
 @Output() buttonWasClicked = new EventEmitter<string[]>();
```
Baguhin ang onButtonClick() function. Kapag ipinapadala ang kaganapan sa parent component, idagdag ang data bilang argumento sa emit() function:
```
 onButtonClick() { 
    this.buttonWasClicked.emit(this.listOfPeople); 
}
```
Sa 'app.component.html', baguhin ang tag na 'app-data-component.' Idagdag ang '$event' sa function na buttonInChildComponentWasClicked(). Naglalaman ito ng data na ipinadala mula sa child component.
```
 <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked($event)"></app-data-component>
```

I-update ang function sa 'app.component.ts' para idagdag ang parameter para sa data:

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

Magdagdag ng bagong variable na tinatawag na 'data' para iimbak ang data na nagmumula sa child component:

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

Ipakita ang data sa HTML page:
```
 <p>{{data.join(', ')}}</p>
```
I-type ang command na 'ng serve' sa isang terminal para patakbuhin ang iyong Angular application. Buksan ito sa isang web browser sa localhost:4200.
Mag-click sa Pindutin mo ako pindutan. Ipapadala ng child component ang data mula sa child component patungo sa parent component.

Pagpapadala ng Data sa Iba Pang Mga Bahagi Gamit ang Output Decorator

May iba pang mga dekorador na maaari mong gamitin sa Angular, gaya ng Input decorator o ang Component decorator. Maaari kang matuto nang higit pa tungkol sa kung paano mo magagamit ang iba pang mga dekorador sa Angular upang pasimplehin ang iyong code.