0

Estou utilizando a nova biblioteca do angular para fazer requisições, a HttpClient. Junto com o angular 4+ estou utilizando aqui na empresa para o backend, Java com Spring (boot).

O problema está ocorrendo na hora de fazer uma requisição GET para o backend, o HttpParams, usado com HttpClient para passar parâmetros, não faz o replace das variáveis e assim o backend nega a requisição.

Ex.: URL backend (Java): controller/obterByCodOne/{codOne}/codTwo/{codTwo}

Ex.: URL frontend (Angular): http://localhost:8080/controller/obterByCodOne/:codOne/codTwo/:codTwo

Código:

let params = new HttpParams()
            .set('codOne', codOne)
            .set('codTwo', codTwo);

Resultado (errado): http://localhost:8080/controller/obterByCodOne/:codOne/codTwo/:codTwo?codOne=valueA&codTwo=valueB

O HttpParams não está substituindo a variável, mas concatenando.

Em outro projetos AngularJS era substituído o valor normalmente usando o $resource. Ao invés de ter q ficar concatenando pedaços de URL's com as variáveis até chegar ao um resultado final.

Enfim... Estou nesse empasse. Ou não estou entendendo o uso do HttpParams ou não estou sabendo usa-lo.

4
  • Tentou deixar a url somente controller/obterByCodOne?
    – BrTkCa
    Commented 4/12/2017 às 15:16
  • @LucasCosta já sim. Desse jeito retorna 404 :\
    – Jocsã
    Commented 4/12/2017 às 16:14
  • @LINQ qual arquivo mais vc precisa? Só coloquei isso pq achei q fosse suficiente.
    – Jocsã
    Commented 4/12/2017 às 16:15
  • Todo link que encontro mostra montando a url na mão. Ex: javasampleapproach.com/frontend/angular/…
    – Jocsã
    Commented 4/12/2017 às 16:20

3 Respostas 3

1

Já ocorreu este problema comigo. Caso não consigo usar o HttpParams, faça uma manipulação de String e adicione manualmente os params. ex.:

  public getPessoas(idade){

       this.http.get(URL_API+"?idade="+idade)
       ...
  }

obs.:

  • URL_API - É a url da api
  • "?idade" - É a forma manual de adicionar um parâmetro.
  • idade - variável que representa o valor que estou passando como parâmetro.

Caso queira adicionar um novo parametro, adicione um "&" e passe o novo parâmetro. ex.:

this.http.get(URL_API+"?idade="+idade+"&peso="+peso)

Esta não é a melhor solução, mas funciona! Espero que tenha ajudado :)

1
  • Se eu usar o HttpParams ele já faz isso pra mim. O problema é que eu defino as variáveis no meu back na própria url, como no exemplo que eu dei a cima. Mas provavelmente eu vá optar por essa opção mesmo. Estou analisando o melhor caso e depois comento aqui. Vlw cara!
    – Jocsã
    Commented 4/12/2017 às 17:41
1

O HttpParams são os QueryParams, os parâmetros de url ?.

Use interpolação de String do TypeScript para montar sua url.

get(codOne: number, codTwo: number): Observable<any> {
  return this.httpClient.get(`http://localhost:8080/controller/obterByCodOne/${codOne}/codTwo/${codTwo}`);
}
1
  • Encontrei uma outra solução. Mas obrigado!
    – Jocsã
    Commented 29/12/2017 às 12:30
0

Como minhas URLS estavam em um arquivo de URLS padrão, eu não poderia concatenar. Acabei adotando um padrão de para minhas URLS e cada parametro é seguido de dois pontos, exemplo: http://minhaurl.com/:idA/:nomeB e no meu serviço eu dou um replace. No backend em Java eu utilizo @Pathvariable nos meus parâmetros, sendo q o @RequestMapping eu usei minha url assim http://minhaurl.com/{idA}/{nomeB}.

Neste cenário, os parâmetros devem ser obrigatórios. Em um caso de filtro com parâmetros opicionais eu adoto a prática de usar DTO (Data Transfer Object).

Espero ajudar tbm!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .