Question

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

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

当我点击此网址时，转换为：

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

％20 指的是空格。我该如何阻止这种转换？

Answer 1

这是一个常见的问题。 URL使用eval XQuery on server: cannot process response with 504 status字符分隔两个单词。为了在参数值中使用+字符，您需要在将参数值作为URL的一部分添加之前对其进行编码。 Javascript / TypeScript为此特定目的提供+函数。

URL编码将字符转换为可以传输的格式通过互联网。 [w3Schools Reference]

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

encodeURI()

以同样的方式，您可以使用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()

Answer 2

您可以通过添加Interceptor来覆盖默认的角度编码，以解决此问题：

'a

并在app.module.ts的提供者部分声明它

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

Answer 3

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

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

将参数编码为base64编码，这样没有特殊字符可以破坏您的应用程序，但您还需要在接收部分处理它（解码）。
在点击URL之前，更简单的解决方案是用％2B替换所有+符号。通过这种方式，另一方将能够正常解码它，而无需特殊的例行程序。

有关更多信息，您应该了解以下堆栈溢出问题Android: howto parse URL String with spaces to URI object?和URL encoding the space character: + or %20?

Answer 4

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

以下是对应的提交：fix(router): fix URL serialization

如果要更改此行为并将“ +”替换为“％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

URL将被转换为：

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

希望这会有所帮助。

Answer 5

我找到了解决方案并将其发布以供将来参考。 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;
      });
    }
  ])

Answer 6

在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 7

我正在使用Angular 7，在URI中将 + （一个“ xyz + manwal”）替换为一个空格（例如此“ xyz manwal”）当到达后端代码时。

encodeURI（）对我不起作用，我使用了 encodeURIComponent（），它将 + 转换为％2B

     encodeURIComponent("xyz+manwal") => "xyz%2Bmanwal"

下面是示例代码

    // filter = xyz+manwal
    let filterString =  encodeURIComponent(filter); // filterString = xyz%2Bmanwal

    return this.http.get<ListResults>("http://website/query-results?" + filterString ).pipe(
      retry(3),
      catchError(........)
    )

角网址加号转换为空间

7 个答案: