Question

我有这个网址：

http://localhost:4200/auth/verify-checking/?email=kiadr93721477@gmail.com&code=6XWK+4bpLA++2UfBr

在此网址中，我有一个参数code=6XWK+4bpLA++2UfBr，在该网址中，我有一个特殊的字符，如+。

我通过以下代码读取了参数：

 constructor(private route: ActivatedRoute,
    private authService: AuthService,
    private router:Router) {
      this.route.queryParams.subscribe(params => {
        this.sendModel.email = params['email'];
        this.sendModel.code =  params['code'];
      });
  
  }

当我需要阅读代码并将其发送到服务器时，它会发送以下代码：6XWK 4bpLA 2UfBr，但它必须像这样6XWK+4bpLA++2UfBr，并且用“空白”代替+

我创建了一个自定义网址Serlizer，但是它不起作用，仍然存在该问题：

@Injectable()
export class CustomUrlSerializer implements UrlSerializer {
  /** Parses a url into a {@link UrlTree} */
  private defaultSerializer: DefaultUrlSerializer = new DefaultUrlSerializer();

  /** Parses a url into a {@link UrlTree} */
  parse(url: string): UrlTree {

    // This is the custom patch where you'll collect segment containing '='
    const lastSlashIndex = url.lastIndexOf('/'), equalSignIndex = url.indexOf('=', lastSlashIndex);
    if (equalSignIndex > -1) { // url contians '=', apply patch
      const keyValArr = url.substr(lastSlashIndex + 1).split('=');
      const urlTree = this.defaultSerializer.parse(url);

      // Once you have serialized urlTree, you have two options to capture '=' part
      // Method 1. replace desired segment with whole "key=val" as segment
      urlTree.root.children['primary'].segments.forEach((segment: UrlSegment) => {
        if (segment.path === keyValArr[0]) {
          segment.path = keyValArr.join('='); // Suggestion: you can use other unique set of characters here too e.g. '$$$'
        }
      });

      // Method 2. This is the second method, insert a custom query parameter
      // urlTree.queryParams[keyValArr[0]] = keyValArr[1];
      return urlTree;
    } else {
      // return as usual
      return this.defaultSerializer.parse(url);
    }
  }

  /** Converts a {@link UrlTree} into a url */
  serialize(tree: UrlTree): string {
    return this.defaultSerializer.serialize(tree);
  }
}

并在core.module中注入提供者：

    {
        provide: UrlSerializer,
        useClass: CustomUrlSerializer
    },

是什么问题？我该如何解决这个问题？

Answer 1

我相信问题出在传递值时。正如您尚未显示的那样，我制作了一个有效的示例，该示例无需任何序列化程序即可使用查询参数。

工作示例：

https://stackblitz.com/edit/angular-navigate-with-query-params-cutzfm

允许从url中读取特殊字符

1 个答案: