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
Observable
de produtos? O serviço é o cara central que têm a lista dos produtos. Quem precisa referenciar os produtos dá umsubscribe
.