角网址加号转换为空间

Question

我有角度应用程序,我想在查询字符串中传递加号+,如:

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

当我点击此URL时,它将转换为:

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

凡%20指的空间.我该如何阻止这种转换？

Answer 1

您可以通过添加Interceptor来覆盖默认的角度编码,并修复此问题:

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);
  }
}

并在app.module.ts的providers部分声明它

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

Answer 2

这是一个常见的问题.+URL使用该字符分隔两个单词.为了+在参数值中使用字符,您需要在将参数值作为URL的一部分添加之前对其进行编码.Javascript/TypeScript为encodeURI()特定目的提供功能.

URL编码将字符转换为可以通过Internet传输的格式.[w3Schools Reference]

以下是解决此问题的方法:

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 }`;

以同样的方式,您可以使用decodeURI()方法解码参数.

let decodedValue = decodeURI(encodedValue);

Answer 3

在Angular 5.2.7+中，查询字符串中的“ +”替换为空格“”。

这是相应的提交：fix（router）：修复URL序列化

如果要更改此行为并将“ +”替换为“％2B”，则可以创建一个自定义的URL序列化程序，并将其提供给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

该网址将转换为：

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

希望这会有所帮助。

Answer 4

这是一个很常见的问题。您可以在 application/x-www-form-urlencoded 请求中正常传递它。没有其他请求能够正确解析+。他们总是会将其解析为 %20 而不是 %2B。

您需要手动操作查询参数，有两种方法：

• 将参数编码为 base64 编码，这样任何特殊字符都不会破坏您的应用程序，但您还需要在接收部分处理它（解码）。
• 更简单的解决方案是，在访问 URL 之前，将所有 + 符号替换为 %2B。这样对方就能够正常解码，而不需要特殊的例程。

有关更多信息，您应该参考以下堆栈溢出问题Android：如何将带有空格的 URL 字符串解析为 URI 对象？URL编码空格字符：+ 或 %20？

Answer 5

在 Angular v6.1.10 中，如果您只需要在一处修复“+”号编码，这对我有用。

getPerson(data: Person) {

  const httpParams = new HttpParams({
    fromObject: {
      id: data.id,
      name: data.name,
      other: "xyz+manwal"
    }
  });

  // manually encode all "+" characters from the person details
  let url = BASE_URL + "/select?" + httpParams.toString().replace(/\+/gi, '%2B');

  return this.http.get(url);
}

我发现如果您在初始化httpParams对象时尝试替换“+”号，则它不起作用。您必须在转换httpParams为字符串后进行替换，如这一行所示：

let url = BASE_URL + "/select?" + httpParams.toString().replace(/\+/gi, '%2B');

Answer 6

我已经找到解决方案并将其发布以供将来参考。Angular js 正在将+符号转换为%2B.

以下代码阻止了这种情况：

.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;
      });
    }
  ])