1
resposta

Disparar evento para componentes do template

Tenho o seguinte app.component.html

<div>

  <app-menu></app-menu>

  <div class="layout-main">
    <app-topbar></app-topbar>

    <div class="layout-content">
      <router-outlet></router-outlet>
    </div>

</div>

Nele, tenho um menu lateral e um topbar, estou tendo o seguinte problema. Alguns componentes, carregados pelo router-outlet alteram dados que já são carregados nos componentes de menu e de topbar.

Gostaria de saber como posso disparar algum evento que recarregasse os dados de app-menu ou app-topbar.

1 resposta

Cara, você pode criar um servico que dispara event por toda sua aplicacao, eu gosto de chamar de Hook (bastante usado no PHP).

Veja se consegue entender

Arquivo : hook.service.ts

import { Injectable, EventEmitter } from '@angular/core';
@Injectable()
export class HookService {

  private static emitters: {[nomeEvento: string]: EventEmitter<any>} = {}

  static get (nomeEvento:string): EventEmitter<any> {
      if (!this.emitters[nomeEvento])
          this.emitters[nomeEvento] = new EventEmitter<any>();
      return this.emitters[nomeEvento];
  }
}

Exemplo de disparo :

import { HookService } from '../../../servicos/hook.service';
export class EmProdutoComponent{

  lookAfterSave(){
    HookService.get('relatorio').emit(dados);
  }
} 

==========

Exemplo de recebimento

import { HookService } from '../../../servicos/hook.service';
export class RelatorioMenuComponent{

  public relatorio:any;
  constructor() { 
    HookService.get('relatorio').subscribe((relatorio:any) => this.relatorio = relatorio)
  }

}