Componentes genéricos em angular 5 ou superior

[guilhermecostalopes]

Tenho estes botões que estão em todas os componentes criados de pesquisa. Sempre chamam um método padrão, isto é, a classe do componente extend de uma. Funcionando perfeitamente.

<p-button type="button" (click)="pesquisar(true)" icon="pi pi-filter" 
  pTooltip="Pesquisar" tooltipPosition="bottom" class="ui-button-raised">
</p-button>&nbsp;
<p-button type="button" (click)="novo()" icon="pi pi-plus-circle" 
  pTooltip="Novo" tooltipPosition="bottom" class="ui-button-raised">
</p-button>&nbsp;
<p-button type="button" (click)="alterar()" icon="pi pi-ban" 
  pTooltip="Limpar" tooltipPosition="bottom" class="ui-button-raised">
</p-button>&nbsp;
<p-button type="button" (click)="alterar()" icon="pi pi-pencil" 
  pTooltip="Alterar" tooltipPosition="bottom" class="ui-button-raised">
</p-button>&nbsp;
<p-button type="button" (click)="deletar()" icon="pi pi-trash" 
  pTooltip="Deletar" tooltipPosition="bottom" class="ui-button-raised">
</p-button>&nbsp;
<p-button type="button" (click)="bloquear()" icon="pi pi-lock" 
  pTooltip="Bloquear" tooltipPosition="bottom" class="ui-button-raised">
</p-button>&nbsp;
<p-button type="button" (click)="inativo()" icon="pi pi-tag" 
  pTooltip="Inativar" tooltipPosition="bottom" class="ui-button-raised">
</p-button>&nbsp;
<p-button type="button" (click)="desbloquear()" icon="pi pi-unlock" 
  pTooltip="Desbloquear" tooltipPosition="bottom" class="ui-button-raised">
</p-button>&nbsp;
<p-button type="button" (click)="imprimirTodos()" icon="pi pi-print" 
  pTooltip="Imprimir todos registros" tooltipPosition="bottom" class="ui-button-raised">
</p-button>

Para não ficar com este código em todas as telas criei o componente com o nome: BotoesTelaPesquisaComponent, assim coloquei no código html o seguinte código
<app-botoes-tela-pesquisa></app-botoes-tela-pesquisa>, assim aparece os botões corretamente.

Mas como imaginei ele não acha os métodos que estão no click, o que está correto, exemplo: pesquisar, alterar, novo, etc... Assim quando clico no botão dá erro no console do navegador informando que não existe o método.

Sei que existe o EventEmitter, que é passado por uma classe service. Mas não consegui desenvolver.

O que está faltando ?

[lucashfreitas]

Fala guilherme! Uma solução pro seu caso seria utilizar Output e o EventEmitter. Recomendo fortemente pesquisar e ler mais a fundo para entender o funcionamento antes de implementar, dessa forma você vai realmente aprender como funciona.

Basicamente, voce vai declarar uma propriedade OutPut no seu componente compartilhado que receberà um event emitter com o objeto que voce deseja passar para os demais componentes nesse evento. (Caso nao deseja passar nenhum valor, apenas o evento, esse valor pode ser vazio).

1- No seu componente compartilhado, declare uma propriedade do tipo Output, que sera um objeto do tipo EventEmitter, emitindo o valor que voce deseja. Exemplo:

  @Output() pesquisa: EventEmitter<_ReturnPesquisa_> = new EventEmitter();
@Output() novo: EventEmitter<_ResultadoNovo_> = new EventEmitter();
@Output() alterar: EventEmitter<_ResultadoNovo_> = new EventEmitter();
@Output() deletar: EventEmitter<_ResultadoNovo_> = new EventEmitter();

Lembrando que o que voce passa entre <<< >>> do event emitter eh o tipo de objeto que voce deseja passar para os demais componentes que utilizarem o app-botoes-tela-pesquisa. No seu caso, caso você deseje apenas executar uma ação que não vai receber nenhum parametro do componente compartilhado, vc pode passar null ou void.

2 - No evento de clique de cada botão, voce devera emitir o event emitter correspondente, exemplo:

deletar() {
this.deletar.emit(); //emite o output do event emitter quando o botao deletar è clicado.
}

this.deletar representa o output que voce declarou no seu componente.

3 - Utilizar o componente compartilhado nos demais components:

Toda vez que voce utilizar o seu componente compartilhado, basta associar os OUTPUTS dele a metodos no componente que voce esta importando. Exemplo:

<app-botoes-tela-pesquisa
(deletar)="processarDelete($event)"
(alterar)="processarAlterar($event)"
>
</app-botoes-tela-pesquisa>

processarDelete è um metodo do componente no qual voce està utilizando o componente compartilhado.. Observe que voce declara entre PARENTESES o nome do output e associa ele a algum metodo no componente em que esta utilizando. O parametro $event è o valor que voce declarou no EventEmitter. Caso ele for vazio nao è necessario receber o event como parametro.

Funcionaria mais ou menos assim. Qualquer dùvida è sò falar. Abraço.

[GustavoCostaW]

Dá uma pesquisada em: Container and Presentational Components

Alguns links recomendados para você dar uma lida que pode te ajudar:

https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
https://www.youtube.com/watch?v=WfRmhYgwIho