Question

目前我们在angular 4+应用程序中使用矩阵参数。 Google Analytics在使用;阅读网址时遇到问题，因此我们决定将其更改为查询参数。但是旧的符号（矩阵）必须是可访问的并重定向到新的符号并将此类事件保存到db。

我看到三种可能的解决方案：

使用自定义URL序列化器/解析器，它将使用正则表达式将矩阵转换为查询，保存到数据库并进行重定向
使用具有相同功能的某种路线保护
使用专用组件来处理此功能

虽然第三种方式肯定是最后一次机会选择，但我很难预料其余两种方式会更好。

Answer 1

我会同时使用第一和第三种解决方案。

我将使用的组件是AppComponent，因为它是应用程序中最高的组件。

然后，我将解析URL，检测它是否为矩阵表示法，如果是，则将其转换为查询params表示法。

然后，我会使用查询参数表示法将用户重定向到他要求的页面。

Answer 2

我已经解决了所有问题，所以在这里

customUrlSerializer：

parse(url: any): UrlTree {
    const dus = new DefaultUrlSerializer();
    const splittedUrl = url.replace(/%3D/g, '=').split(/(;[\w\d-]*=[\w\d-]*)/g);

    const matrixParams = this.extractMatrixParams(splittedUrl);
    const queryParams = this.extractQueryParams(url);

    if (matrixParams) {
      this.saveOldUrlIncident(url);
    }

    const newUrl = this.buildNewString(splittedUrl, matrixParams, queryParams);
    return dus.parse(newUrl);
  }

  serialize(tree: UrlTree): any {
    const dus = new DefaultUrlSerializer(),
      path = dus.serialize(tree);
    return path.replace(/%3D/g, '=');
  }

  private extractMatrixParams(splittedUrl: string[]): string {
    return splittedUrl
      .filter(el => el.startsWith(';'))
      .reduce((a, b) => (a = a + b.substr(1) + '&', a), '')
      .slice(0, -1);
  }

  private extractQueryParams(url: string): string {
    return url.lastIndexOf('?') > -1 ? url.substr(url.lastIndexOf('?') + 1, url.length - 1) : '';
  }

  private buildNewString(splittedUrl: string[], matrixParams: string, queryParams: string): string {
    let newUrl = splittedUrl.reduce((a, b) => {
      if (b && !b.startsWith(';')) {
        if (b.indexOf('?')) {
          a = a + b.split('?')[0];
        } else {
          a = a + b;
        }
      }
      return a;
    }, '');

    if (matrixParams || queryParams) {
      newUrl = newUrl + '?';
    }
    if (matrixParams) {
      newUrl = newUrl + matrixParams;
    }
    if (queryParams) {
      newUrl = newUrl + (matrixParams ? '&' : '') + queryParams;
    }

    return newUrl;
  }

在app.module中，在提供程序中添加： {provide: UrlSerializer, useClass: CustomUrlSerializer},

处理Angular 4+中的URL（矩阵和＆amp;＆amp;查询）参数

2 个答案: