angular - 如何在 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 显示如下网址；

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

想要的:

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

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

Answer 1

查看 RouterLink 的文档:

[routerLink]用于传递 ? 之前的内容，称为“参数”。

[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也接受一个数组。