如何在 Angular 8 中禁用“[routerLink]”上动态生成的 URL 编码？

Question

我有[routerLink]如下；

\n\n

 <li *ngFor="let item of pageNumbers" class="page-item">\n      <a\n        class="page-link"\n        [routerLink]="getPageUrl(item) | async"\n        routerLinkActive="active"\n        >{{ item }}</a\n      >\n    </li>\n

\n\n

方法getPageUrl就像；

\n\n

public getPageUrl(pageNumber: number): Observable<string> {\n    const url: Observable<string> = this.route.url.pipe(\n      map((segments: UrlSegment[]) => {\n        let segmentsString = segments.join("/");\n        let pageUrl = `/${segmentsString}?startIndex=${pageNumber}`;\n        return pageUrl;\n      })\n    );\n    return url;\n  }\n

\n\n

但在浏览器上，Angular 显示如下所示的 url；

\n\n

http://localhost:3005/documents%3FstartIndex%3D1 \n

\n\n

期望：

\n\n

http://localhost:3005/documents?startIndex=1\n

\n\n

我在这里错过了什么吗？我只是将分页直接绑定到 [routerLink]，但是会有更多查询字符串参数（过滤器、排序）进入 URL，这就是我尝试动态生成 URL 的原因。

\n

Answer 1

检查RouterLink的文档：

• [routerLink]用于传递 之前的内容?，称为“params”。
• [queryParams]用于传递 后面的内容?，称为“查询参数”。

因此，为了解决您的问题，一个可能的解决方案是返回一个对象而getPageUrl不是字符串，该对象将同时具有参数和查询参数：

public getPageUrl(pageNumber: number): Observable<string> {
    return this.route.url.pipe(
      map((segments: UrlSegment[]) => {
        return {params: segments, queryParams: {startIndex: pageNumber};
      })
    );
  }

你这样使用它：

<a *ngIf="getPageUrl(item) | async as url"
   class="page-link"
   [routerLink]="url.params"
   [queryParams]="url.queryParams">{{ item }}</a

请注意，您不需要使用 来连接查询段/，因为routerLink它也接受数组。