Como usar o decorador de saída em Angular

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.

1. 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".
2. Para este exemplo, o componente "app" atuará como o componente pai. Substitua todo o conteúdo em "app.component.html" pelo seguinte:

   <divaula="componente pai">
   <h1> Este é o componente pai h1>
   div>

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

   .parent-component {
   família de fontes: arial, helvética, sem serifa;
   cor de fundo: coral claro;
   preenchimento: 20px
   }

4. Use o comando "ng generate component" para criar um novo componente Angular chamado "componente de dados". Neste exemplo, "data-component" representará o componente filho.

   componente de dados ng g c

5. 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:

   <divaula="componente filho">
   <p> Este é o componente filho p>
   <botão (clique)="onButtonClick()">clique em mimbotão>
   div>

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

   .child-component {
   família de fontes: arial, helvética, sem serifa;
   cor de fundo: azul claro;
   margem: 20px;
   preenchimento: 20px
   }

7. Adicione a função onButtonClick() ao arquivo TypeScript para o componente, em "data-component.component.ts":

   onButtonClick() {
   }

8. Ainda dentro do arquivo TypeScript, adicione "Output" e "EventEmitter" à lista de importações:

   importar { Componente, Saída, EventEmitter, OnInit } de'@angular/núcleo';

9. 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.

   exportaraula DataComponentComponent implementos OnInit {
   @Saída() botãoCliquei = novo EventEmitter<vazio>();
   // ...
   }

10. 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() {
    esse.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.

1. 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.

   <componente de dados do aplicativo (botãoFoiClicado)="buttonInChildComponentWasClicked()">componente de dados do aplicativo>

2. 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.

   mensagem: corda = ""
   buttonInChildComponentWasClicked() {
   esse.mensagem = 'O botão no componente filho foi clicado';
   }

3. Exiba a mensagem em "app.component.html":

   <p>{{mensagem}}p>

4. 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.
5. 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.

1. Em "data-component.component.ts", adicione uma variável para armazenar uma lista de strings contendo alguns dados.

   listaDePessoas: corda[] = ['Joey', 'John', 'James'];

2. 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:

   @Saída() botãoCliquei = novo EventEmitter<corda[]>();

3. Modifique a função onButtonClick(). Ao enviar o evento para o componente pai, adicione os dados como um argumento na função emit():

   onButtonClick() {
   esse.buttonWasClicked.emit(esse.listOfPessoas);
   }

4. 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.

   <componente de dados do aplicativo (botãoFoiClicado)="buttonInChildComponentWasClicked($event)">componente de dados do aplicativo>

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

   buttonInChildComponentWasClicked (dataFromChild: corda[]) {
   esse.mensagem = 'O botão no componente filho foi clicado';
   }

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

   mensagem: corda = ""
   dados: corda[] = []
   buttonInChildComponentWasClicked (dataFromChild: corda[]) {
   esse.mensagem = 'O botão no componente filho foi clicado';
   esse.data = dataFromChild;
   }

7. Exiba os dados na página HTML:

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

8. Digite o comando "ng serve" em um terminal para executar seu aplicativo Angular. Abra-o em um navegador da Web em localhost: 4200.
9. 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.