Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

component geral de menssagem

Referente ao curso Angular 2: webapps ainda mais poderosas parte 2

por Matheus Calaça
| 387.1k xp | 42 posts
Desenvolvedor full stack

Bom dia gostaria de fazer um componente geral de mensagem, e que ele seja acionado somente por uma função.

Estou usando o primeng e seu componente de mensagem Growl. Porem estou repetindo várias vezes ele para chamar as mensagens a ideia seria criar um componente geral colocar ele no index, e sempre que precisar usar chamar uma função com passando a mensagem e o tipo da mensagem. Assim automaticamente o Growl aparece na tela, tentei várias formas porem não achei uma lógica para fazer isso, alguém sabe como fazer?

Como chamar a função de fazer a mensagem no controler do componente?

atualmente estou usando na mesma forma da documentação do primeng segue o código

componentes onde estou usando o growl

<p-growl [(value)]="msgs"></p-growl>

função que acional o Growl

msgs: Message[] = [];

  showMenssagem(tipo: string, titulo: string, menssagem: string) {
    console.log(`tipo ${tipo} titulo ${titulo} menssagem ${menssagem}`);

    this.msgs = [];
    this.msgs.push({ severity: tipo, summary: titulo, detail: menssagem });
  }

e esses códigos estou repetindo em todos componentes que usa o Growl, queria só chamar a função e acionar o Growl independente do componente, tipo assim

servicoGrowl.mostraGrowl(tipo, titulo, menssagem)

alguma ideia?

3 respostas
por Alexandre Aquiles
| 630.5k xp | 623 posts
Instrutor Tech Lead

Olá, Matheus.

Acho que o caminho é esse mesmo que você disse: criar um Serviço!

solução!
por Matheus Calaça
| 387.1k xp | 42 posts
Desenvolvedor full stack

consegui fazer segue minha solução para o problema.

Criei um classe com as configurações da menssagem

MensagemGrowlPrimeNg .ts

export class MensagemGrowlPrimeNg {
public tipo: string;
public mensagem: string;
}

Criei um service que cria um EventEmitter() statico e esse event mite envia a os dados da menssagem que inscreveu nele.

conteudo do service

export class ServicoMensagem{
 static mostraGrowlMenssagem: EventEmitter<MensagemGrowlPrimeNg > = new EventEmitter();

Messagem(menssagemGrowlPrimeNg : MensagemGrowlPrimeNg ) {
    ServicoMensagem.mostraGrowlMenssagem.emit(menssagemGrowlPrimeNg );
  }
}

criei o component normal com o growl a unica mudança foi a inscrição no servico que emite a menssagem

segue o codigo de como fiz essa inscrição

msgs: Message[] = [];

ServicoMensagem.mostraGrowlMenssagem.subscribe(
      data => {

  this.msgs = [];
    this.msgs.push({ severity: <MenssagemGrowlPrimeNg >data.tipo, summary: <MenssagemGrowlPrimeNg >data.tipo, detail: <MenssagemGrowlPrimeNg >data.mensagem });
      }
    );

e agora quando eu preciso usar wu so chamo a função do service segue exmplo

constructor(
    private _ServiceMenssagem: ServicoMensagem
  ) { }

 this._ServiceMenssagem
          .Messagem(new MenssagemGrowlPrimeNg ( 'sucesso', 'mensagem OK OK OK'));
por Alexandre Aquiles
| 630.5k xp | 623 posts
Instrutor Tech Lead

Excelente, Matheus!

Obrigado por compartilhar!