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

Question

我有 [routerLink] 如下；

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

和getPageUrl方法一样；

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

但是在浏览器上 angular 显示如下 url；

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

期望：

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

我是不是漏掉了什么？我会简单地将分页直接绑定到 [routerLink]，但是会有更多查询字符串参数（过滤器、排序）进入 URL，这就是为什么我要尝试动态生成 URL。

Answer 1

查看 RouterLink 的文档：

[routerLink]用于传递?之前的内容，称为"params"。
[queryParams]用于传递?之后的内容，称为"query params".

因此，为了解决您的问题，一个可能的解决方案是 return 来自 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 也接受数组。

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

How to disable dynamically generated URL encoding on ` [routerLink]` in Angular 8?

angular-routing

angular