代码之家 › 专栏 › 技术社区 › Mike

在Angular 4中处理两个URL(矩阵和查询)参数+

query-parameters angular2-routing routing angular

Mike · 技术社区 · 8 年前

目前,我们在angular 4+应用程序中使用矩阵参数。Google Analytics在读取URL时遇到问题 ; 所以我们决定将其更改为查询参数。然而,旧的符号(矩阵)必须可以访问,并重定向到新的符号,并将此类事件保存到db中。

我认为有三种可能的解决方案:

使用自定义URL序列化程序/解析器,它将使用regex将矩阵转换为查询、保存到db并进行重定向
使用某种具有相同功能的路线守卫
使用专用组件处理此功能

虽然第三条路肯定是最后的选择,但我很难预测剩下的两条路中哪一条更好。

2 回复 | 直到 8 年前

user4676340 user4676340 8 年前

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

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

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

然后,我将使用query param符号将用户重定向到他请求的页面。

Mike 8 年前

我的解决方案已经通过了所有测试

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

和应用程序内。模块,在提供程序中添加: {provide: UrlSerializer, useClass: CustomUrlSerializer},