如何在 Angular 15 的 url 中添加特殊字符

Question

我正在将用 Angular JS 编写的旧应用程序升级到最新的 Angular 15。迁移很顺利，但面临网址问题。实际上我们的调查网址如下所示，并且每个调查的网址都不同。 https://some-domain.com/#/77RqxKxiEdXDccBB8S3iahYS9MB4cGqQR9G6XciZKR0+U=

你可以看到，url 包含“+”和“=”。但是当我在 Angular 15 应用程序中使用这个 url 时，它会替换特殊字符，特别是从 url 中删除“=”。

但是在数据库中，这个加密的 ID 被存储为唯一标识符，并且仅使用它从数据库中获取所有详细信息。

问题是我无法更改网址，因为许多以前的调查已使用该网址发送给客户。

任何帮助将不胜感激。

我尝试使用从谷歌找到的一些帮助，例如使用 URIencode 或来自此网址的帮助 https://stackblitz.com/edit/allowing-angular-4-routes-to-pass-special-charact-ebpsmt?file=src%2Fapp%2Furl-serializer.service.ts

但它仍然无法正常工作，因为 url 中仍然缺少“=”。

Answer 1

为了防止 Angular 15 中的 URL 中的“+”和“=”等特殊字符被替换，您可以实现自定义 URL 序列化器。该序列化程序将处理特殊字符的编码并确保它们保留在 URL 中。

创建自定义 URL 序列化器服务：

import { Injectable } from '@angular/core';
import { DefaultUrlSerializer, UrlSegment, UrlTree } from '@angular/router';

@Injectable({
  providedIn: 'root',
})
export class CustomUrlSerializer extends DefaultUrlSerializer {
  private _encode(value: string): string {
    return encodeURIComponent(value).replace(/%20/g, '+');
  }

  private _decode(value: string): string {
    return decodeURIComponent(value.replace(/\+/g, '%20'));
  }

  override parse(url: string): UrlTree {
    const parsedUrl = super.parse(url);
    const root = parsedUrl.root;
    const children = root.children;
    const newChildren = children.map((segment) => {
      return new UrlSegment(segment.path, segment.parameters.map((param) => {
        return { name: param.name, value: this._decode(param.value) };
      }));
    });
    return new UrlTree(new UrlSegment('', []), root.children, root.queryParams, parsedUrl.query);
  }

  override serialize(urlTree: UrlTree): string {
    const serializedUrl = super.serialize(urlTree);
    return serializedUrl.replace(/%20/g, '+');
  }
}

在应用程序模块中导入并配置自定义 URL 序列化程序：

import { NgModule } from '@angular/core';
import { RouterModule, UrlSerializer } from '@angular/router';
import { CustomUrlSerializer } from './custom-url-serializer.service';

@NgModule({
  imports: [
    RouterModule.forRoot([], {
      urlSerializer: CustomUrlSerializer,
    }),
  ],
})
export class AppModule {}