Angular 8 – Compartilhar dados de componentes com outros componentes

Use Input, Output, EventEmitter e ViewChild do Angular para compartilhar dados do componente.

Jeroenouw Segue 16 de novembro de 2018 · 4 min ler por rawpixel em Unsplash

Para compartilhar dados de componentes, você pode usar:

  • @Input – ligação de propriedade
  • @Output & EventEmitter – ligação de evento
  • @ViewChild e AfterViewInit

@Input – ligação de propriedade

Se você quiser passar dados do componente pai para o componente filho, precisará usar duas coisas: @Input e vinculação de propriedade.

Neste exemplo, definimos no componente filho uma variável chamada childExample que é uma string. Na frente da variável, definimos o Angular's: @Input decorator.

Exibição de código por carbono

Isso dá a opção de adicionar um atributo ao seletor ( <app-child> ) do filho, destacado no exemplo abaixo;

No pai, declaramos uma variável chamada: parentExample . Nós [childExample] um valor a [childExample] . O resultado é que você exibe o texto “Hello Angular 7” no componente filho.

@Output & EventEmitter – ligação de evento

Com @Output e EventEmitter , é o contrário. Você pode passar dados do filho para o componente pai. Novamente na criança, declaramos uma variável, mas desta vez com o decorador @Output e um novo EventEmitter:

Queremos emit um evento para o componente pai fazendo o seguinte:

O que estamos fazendo aqui é que, a cada clique de botão no componente filho, estamos passando o texto “Hello Angular 7” para um componente pai.

Em nosso componente pai, agora podemos definir um evento para o seletor filho ( <app-child> ). Como você vê, usamos o exampleOutput do filho, que tem como valor um método chamado exampleMethodParent com o parâmetro $event .

Nosso resultado aqui é em cada clique de botão no filho, obtemos um texto através de um evento em nosso método pai. Neste método, damos example ao valor de $event . Através da interpolação ( {{ exampleParent }} ), podemos agora ver o texto de exemplo do nosso filho.

@ViewChild e AfterViewInit

A terceira maneira de passar dados é usando @ViewChild e AfterViewInit . Com esta opção final, podemos nos referir a um componente filho e acessar suas variáveis dentro de nosso componente pai.

O decorador é definido no componente pai. Declaramos o seguinte na classe:

Também precisamos implementar o gancho do ciclo de vida AfterViewInit . Por causa do motivo que a criança não está disponível até que a exibição seja inicializada. No método ngAfterViewInit() , exampleChild o exampleChild do ChildComponent e fornecemos o valor para a variável exampleParent .

Nosso ParentComponent completo ficará assim:

E novamente através da interpolação ( {{ exampleParent }} ), podemos agora ver o texto de exemplo do nosso filho.