1
      createContent(data): Observable<any>{
    var  headers : HttpHeaders = new HttpHeaders({
      "Content-Type": "application/x-www-form-urlencoded",
      'Authorization': 'Bearer '+localStorage.getItem('token')
    });
    const url = this.env.rootUrl+'API/SERIES/POST_CREATE_SERIE'
    const data_info = new HttpParams()
    .set('name', "prueba + prueba")
    .set('description', data.description)
    .set('url_route', data.url_portada)
    ;
    
    return this.http.post(url, data_info, {headers:headers})
  }

El problema es que al momento de mandar la petición el campo name se guarda como prueba prueba sin el "+", de hecho lo agrega como un espacio.

2 respuestas 2

0

La cosa es que, desde este punto (commit en GitHub), Angular tiene este comportamiento específico por defecto.

De acuerdo a esta pregunta y sus respuestas, hay al menos dos caminos (con variantes).

  • El camino 1 es escapar todo antes de ponerlo como parámetro de tu petición:
let encodedName = encodeURI('"prueba + prueba"');
const data_info = new HttpParams()
    .set('name', encodedName)...

Y después podrás recuperar todo haciendo el proceso inverso

let decodedValue = decodeURI(encodedValue);

  • El camino 2 es hacerle override al intercerptor con el que Angular escapa caracteres. Algo como
import { HttpInterceptor, HttpRequest, HttpEvent, HttpHandler, HttpParams, HttpParameterCodec } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";

@Injectable()
export class EncodeHttpParamsInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const params = new HttpParams({encoder: new CustomEncoder(), fromString: req.params.toString()});
    return next.handle(req.clone({params}));
  }
}


class CustomEncoder implements HttpParameterCodec {
  encodeKey(key: string): string {
    return encodeURIComponent(key);
  }

  encodeValue(value: string): string {
    return encodeURIComponent(value);
  }

  decodeKey(key: string): string {
    return decodeURIComponent(key);
  }

  decodeValue(value: string): string {
    return decodeURIComponent(value);
  }
}

y luego usarlo en la sección de providers de tu app.module.ts

providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: EncodeHttpParamsInterceptor,
      multi: true
    }
]

Hay algunas otras opciones allí que han variado a medida que ha evolucionado Angular. Puedes pasar por la pregunta citada y revisar.

0

Si no es estricto que data_info sea una instancia de HttpParams, podrías mandar la información como un json.

let data_info = {name: 'prueba + prueba', description: data.description, url_route: data.url_portada};
return this.http.post(url, data_info, {headers:headers});
1
  • pero eso es algo que llenan los usuarios. en la vista les aparece el formulario para crear el contenido. ahi solo tomo los datos que ellos introducen, le puse "prueba + prueba" para que se entendiera más a lo que me refiero Commented el 18 may. 2021 a las 19:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.