0

Suponha que no meu componentA eu tenho uma lista de produtos. No meu componentB tenho um modal que cadastra meus produtos. Ao cadastrar um produto, quero que o componentB chame uma função do componentA para atualizar a lista de produtos.. Como posso fazer isso?

Já tentei assim e não funciona: https://stackoverflow.com/questions/38974896/call-child-component-method-from-parent-class-angular

att

6
  • 2
    eu sugiro que você centralize essa lista de produtos em um serviço, injetando o mesmo nos componentes.
    – mercador
    26/02/2018 às 18:19
  • 1
    Essa também me parece a melhor opção, porém.. Como vou manter essa lista no service se ela vêm de uma requisição http? 26/02/2018 às 18:21
  • Consegui resolver utilizando o EventEmitter, confesso que não fiquei muito satisfeito.. No componentB, ao inserir um registro faço a call do service que retorna os produtos e atualizo a lista do componentA passando a lista atualizada via EventEmitter.. Acha muito ruim essa abordagem? 26/02/2018 às 19:36
  • 1
    por que não criar um Observable de produtos? O serviço é o cara central que têm a lista dos produtos. Quem precisa referenciar os produtos dá um subscribe.
    – mercador
    26/02/2018 às 19:42
  • 1
    Tudo bem, dessa forma fica centralizado o método que retorna produtos.. Acontece que só utilizando esse conceito não resolve meu problema, porque estou utilizando esse modal (ng-bootstrap.github.io/#/components/modal/examples), ou seja, o modal é um component, que na prática é outro escopo.. Após inserir um produto no modal, preciso que a lista do component pai seja atualizada.. Só com observable não tem como resolver esse problema. 26/02/2018 às 22:10

1 Resposta 1

3

Provavelmente o modal é injetado dinamicamente e não está sempre ali presente para trabalhar com eventos entre pai e filho direto.

Para o seu problema, eu sugiro trabalhar com Eventos Globais, esse tipo de evento, conhecido como broadcast, pode ser ouvido de qualquer local do aplicativo, e não só entre descendentes diretos.

Dessa forma, você se inscreveria nesse evento global (que chamo aqui de 'refreshProdutos') no seu componentA:

refreshEvento: any = null;

ngOnInit() {
    this.refreshEvento = EventEmitterService.get('refreshProdutos').subscribe(e => this.carregaProdutos());
}

ngOnDestroy() {
    if (this.refreshEvento !== null) this.refreshEvento.unsubscribe();
}

E no seu componentB, ao atualizar ou cadastrar um novo item, você dispararia esse evento:

salvarProduto() {
    // envia os dados para o servidor e no retorno dispara o evento global:
    EventEmitterService.get('refreshProdutos').emit(true);
}

Assim, todos, em qualquer parte da aplicação, que se inscreveram neste evento, vai receber a sinalização e cada um toma sua atitude, no caso, atualizar a lista.

Tem um artigo que ensina a criar esses eventos globais no Angular para ser usado como nos exemplos acima: https://blog.wgbn.com.br/broadcast-de-eventos-no-angular-2-cb97a5ad6ff1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .