javascript - app - ng-src

Url angular más signo que convierte al espacio

Question

Tengo una aplicación angular donde quiero pasar el signo más + en la cadena de consulta como:

http://localhost:3000/page?name=xyz+manwal

Cuando estoy golpeando esta URL su conversión a:

http://localhost:3000/page?name=xyz%20manwal

Donde % 20 se refieren al espacio . ¿Cómo puedo evitar esta conversión?

Answer 1

En Angular 5.2.7+, el "+" se reemplaza con el espacio "" en una cadena de consulta.

Aquí está el commit correspondiente: fix (router): fix serialización de URL

Si desea cambiar este comportamiento y reemplazar el "+" con "% 2B", puede crear un serializador de url personalizado y proporcionarlo en los proveedores de AppModule.

import { DefaultUrlSerializer, UrlSerializer, UrlTree } from ''@angular/router'';

export default class CustomUrlSerializer implements UrlSerializer {
    private _defaultUrlSerializer: DefaultUrlSerializer = new DefaultUrlSerializer();

    parse(url: string): UrlTree {
        // Encode "+" to "%2B"
        url = url.replace(//+/gi, ''%2B'');
        // Use the default serializer.
        return this._defaultUrlSerializer.parse(url);
    }

    serialize(tree: UrlTree): string {
        return this._defaultUrlSerializer.serialize(tree).replace(//+/gi, ''%2B'');
    }
}

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        { provide: UrlSerializer, useClass: CustomUrlSerializer }
    ],

    entryComponents: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

http://localhost:3000/page?name=xyz+manwal

La URL se convertirá a:

http://localhost:3000/page?name=xyz%2Bmanwal

Espero que esto ayude.

Answer 2

Este es un problema bastante común. Puede pasarlo normalmente en solicitud / x-www-form-urlencoded request. Ninguna otra solicitud podrá analizar correctamente +. Siempre lo analizarán en% 20 en lugar de% 2B.

Necesitaría manipular manualmente el parámetro de consulta, hay 2 formas:

• Codifique el parámetro en la codificación de base64, de esta manera ningún carácter especial puede interrumpir su aplicación, pero necesitará manejarlo también en la parte receptora (decodificación).
• Una solución más simple sería, antes de ir a la URL, reemplazar todos los signos + con% 2B. De esta manera el otro lado podrá decodificarlo normalmente, sin la necesidad de una rutina especial.

Para obtener más información, consulte las siguientes preguntas sobre desbordamiento de pila en Android: ¿cómo analizar la cadena de URL con espacios en el objeto URI? y la URL que codifica el carácter de espacio: + o% 20?

Answer 3

Este es un problema común. La URL utiliza el carácter + para separar dos palabras. Para utilizar el carácter + en los valores de los parámetros, debe codificar los valores de los parámetros antes de agregarlos como parte de la URL. Javascript / TypeScript proporciona una función encodeURI() para ese propósito específico.

La codificación de URL convierte los caracteres en un formato que se puede transmitir a través de Internet. [Referencia de w3Schools]

Aquí es cómo puede solucionar este problema:

let encodedName = encodeURI(''xyz+manwal'');
let encodedURI = ''http://localhost:3000/page?name=''+encodedName;

//.. OR using string interpolation
let encodedURI = `http://localhost:3000/page?name=${ encodedName }`;

De la misma manera, puede decodificar los parámetros usando el método decodeURI() .

let decodedValue = decodeURI(encodedValue);

Answer 4

He encontrado la solución y la he publicado para futuras referencias. Angular js estaba convirtiendo el signo + en %2B .

El siguiente código impidió que:

.config([
    ''$provide'', function($provide) {
      $provide.decorator(''$browser'', function($delegate) {
        let superUrl = $delegate.url;
        $delegate.url = (url, replace) => {
          if(url !== undefined) {
            return superUrl(url.replace(//%2B/g,"+"), replace);
          } else {
            return superUrl().replace(//+/g,"%2B");
          }
        };
        return $delegate;
      });
    }
  ])

Answer 5

Puede anular la codificación angular predeterminada agregando Interceptor, que soluciona esto:

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 declararlo en la sección de proveedores en app.module.ts

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