Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Criação de pipe para mensagens

Olá Pessoal, tudo bem? Eu implementei um filtro de mensagens, onde eu busco, pela chave, uma string em um arquivo .json. Só que estou na dúvida se essa é a melhor prática. Implementei assim: no arquivo mensagens .json:

{
    "MSG_CAMPO_OBRIGATORIO": "Este campo é obrigatório"
}

Arquivo mensagens.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class MensagensService {

  private data:JSON;
  constructor(private httpClient:HttpClient) {
    this.httpClient.get('src/app/mensagens/mensagens.json')
            .subscribe(res => this.data);
  }

}

Arquivo filtro-mensagens.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { MensagensService } from './mensagens.service';

@Pipe({
  name: 'filtroMensagens',
})
export class FiltroMensagensPipe implements PipeTransform {
  private mensagensService:MensagensService;
  constructor(mensagensService:MensagensService){
    this.mensagensService = mensagensService;
  }
  transform(value: string): string {
    return  this.mensagensService;
  }
}

No meu component.html ```

{{'MSG_CAMPO_OBRIGATORIO' | filtroMensagens}}

Isto é uma boa prática ou eu deveria implementar de outra forma? Não encontrei no Angular um filtro do próprio framework que se adeque ao meu caso.

4 respostas

Você chegou na aula de validação? Você Aprenderá a criar validações que são focados em mensagens de validação.

Flávio, cheguei. Muito boa. Eu queria colocar essas mensagens em um arquivo na minha aplicação pra eu passar só o código e ele já vir. Até já tinha pensado em deixar do jeito que você explica na aula. Mas queria modificar pra pegar de um arquivo. Ou isso não é legal? Desde já agradeço. Estou aprendendo bastante com suas aulas. Estou ansioso pelo terceiro módulo. Você é um excelente instrutor.

Obrigado pelo feedback Ivan! Então, no seu caso, você pode simplesmente fazer assim:

// messages.ts
export const messages  = {
        "MSG_CAMPO_OBRIGATORIO": "Este campo é obrigatório"
};

Dai, onde quiser utilizar as mensagens, você importa

import { messages } from './messages'
@Component(........)
export class ComponentQualquer {
       MESSAGES = messages;
       .....
}

Dai no seu template você faz:

<p> 
{{ MESSAGES['MSG_CAMPO_OBRIGATORIO'] }}
</p>

Não precisa ser serviço nem precisa fazer uma requisição com httpClient. O conceito é por ai.

Sucesso e bom estudo meu aluno!

solução!

Obrigado Flávio! Vou implementar desta forma. Obrigado pela ajuda. Fico cada vez mais satisfeito por ter assinado . Está valendo cada centavo pago.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software