Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

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
insira seu código aqui

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} = {}

static get (nomeEvento:string): EventEmitter { if (!this.emitters[nomeEvento]) this.emitters[nomeEvento] = new EventEmitter(); 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) }

}