Como usar o decorador de saída em Angular

Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado. Consulte Mais informação.

No Angular, uma página da Web pode conter muitos componentes reutilizáveis diferentes. Cada componente geralmente contém sua própria lógica TypeScript, modelo HTML e estilo CSS.

Você também pode reutilizar componentes dentro de outros componentes. Nesse caso, você pode usar o decorador de saída para enviar informações de um componente filho de volta para seu componente pai.

Você também pode usar o decorador de saída para ouvir os eventos que ocorrem no componente filho.

Como adicionar o decorador de saída a um componente filho

Primeiro, você precisará criar um novo aplicativo Angular com um componente pai e um componente filho.

Depois de ter um componente pai e filho, você pode usar o decorador de saída para transferir dados e ouvir eventos entre os dois componentes.

Crie um novo aplicação angular . Por padrão, 'app' é o nome do componente raiz. Este componente inclui três arquivos principais: 'app.component.html', 'app.component.css' e 'app.component.ts'.
Para este exemplo, o componente 'app' atuará como o componente pai. Substitua todo o conteúdo em 'app.component.html' pelo seguinte:
```
 <div class="parent-component"> 
  <h1> This is the parent component </h1> 
</div>
```

Adicione um pouco de estilo ao componente do aplicativo pai em 'app.component.css':

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

Use o comando 'ng generate component' para criar um novo componente Angular chamado 'componente de dados'. Neste exemplo, 'data-component' representará o componente filho.
```
 ng g c data-component
```
Adicione conteúdo ao componente filho em 'data-component.component.html'. Substitua o conteúdo atual para adicionar um novo botão. Vincule o botão a uma função que será executada quando o usuário clicar nele:
```
 <div class="child-component"> 
  <p> This is the child component </p> 
  <button (click)="onButtonClick()">Click me</button> 
</div>
```

Adicione algum estilo ao componente filho em 'data-component.component.css':

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

Adicione a função onButtonClick() ao arquivo TypeScript para o componente, em 'data-component.component.ts':
```
 onButtonClick() { 
}
```
Ainda dentro do arquivo TypeScript, adicione 'Output' e 'EventEmitter' à lista de importações:
```
 import { Component, Output, EventEmitter, OnInit } from '@angular/core';
```
Dentro da classe DataComponentComponent, declare uma variável Output para o componente chamada 'buttonWasClicked'. Este será um EventEmitter. Um EventEmitter é uma classe interna que permite informar outro componente quando um evento ocorre.
```
 export class DataComponentComponent implements OnInit { 
  @Output() buttonWasClicked = new EventEmitter<void>(); 
  // ... 
}
```
Use o emissor de evento 'buttonWasClicked' dentro da função onButtonClick(). Quando o usuário clicar no botão, o componente de dados enviará este evento para o componente de aplicativo pai.
```
 onButtonClick() { 
    this.buttonWasClicked.emit(); 
}
```

Como ouvir eventos no componente filho do componente pai

Para usar a propriedade Output do componente filho, você precisará escutar o evento emitido do componente pai.

como fazer flashcards no word 2016

Use o componente filho dentro de 'app.component.html'. Você pode adicionar a saída 'buttonWasClicked' como uma propriedade ao criar a tag HTML. Vincule o evento a uma nova função.
```
 <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked()"></app-data-component>
```
Dentro de 'app.component.ts', adicione a nova função para manipular o evento de clique do botão quando ele ocorrer no componente filho. Crie uma mensagem quando o usuário clicar no botão.
```
 message: string = "" 
 
buttonInChildComponentWasClicked() { 
    this.message = 'The button in the child component was clicked'; 
}
```
Exibir a mensagem em 'app.component.html':
```
 <p>{{message}}</p>
```
Digite o comando 'ng serve' em um terminal para executar seu aplicativo Angular. Abra-o em um navegador da Web em localhost:4200. Os componentes pai e filho usam cores de fundo diferentes para facilitar a distinção entre eles.
Clique no clique em mim botão. O componente filho enviará o evento ao componente pai, que exibirá a mensagem.

Como enviar dados de um componente filho para um componente pai

Você também pode enviar dados do componente filho para o componente pai.

Em 'data-component.component.ts', adicione uma variável para armazenar uma lista de strings contendo alguns dados.
```
 listOfPeople: string[] = ['Joey', 'John', 'James'];
```
Modifique o tipo de retorno do emissor de evento buttonWasClicked. Altere de void para string[], para corresponder à lista de strings que você declarou na etapa anterior:
```
 @Output() buttonWasClicked = new EventEmitter<string[]>();
```
Modifique a função onButtonClick(). Ao enviar o evento para o componente pai, adicione os dados como um argumento na função emit():
```
 onButtonClick() { 
    this.buttonWasClicked.emit(this.listOfPeople); 
}
```
Em 'app.component.html', modifique a tag 'app-data-component'. Adicione o '$event' na função buttonInChildComponentWasClicked(). Contém os dados enviados do componente filho.
```
 <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked($event)"></app-data-component>
```

Atualize a função em 'app.component.ts' para adicionar o parâmetro para os dados:

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

Adicione uma nova variável chamada 'data' para armazenar os dados provenientes do componente filho:

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

Exibir os dados na página HTML:
```
 <p>{{data.join(', ')}}</p>
```
Digite o comando 'ng serve' em um terminal para executar seu aplicativo Angular. Abra-o em um navegador da Web em localhost:4200.
Clique no clique em mim botão. O componente filho enviará os dados do componente filho para o componente pai.

Enviando dados para outros componentes usando o decorador de saída

Existem outros decoradores que você pode usar no Angular, como o decorador Input ou o decorador Component. Você pode aprender mais sobre como usar outros decoradores no Angular para simplificar seu código.