时间戳

首页 > 解决方案 > 如何在 Angular 8 中的“[routerLink]”上禁用动态生成的 URL 编码？

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

问题描述

我有[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;
  }

但在浏览器角度显示如下网址；

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

想要的：

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

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

标签： angularangular-routing

解决方案

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

推荐阅读