如何在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]用于传递?之后的内容，称为"查询参数">

因此，为了解决您的问题，一个可能的解决方案是从getPageUrl返回一个对象，而不是字符串，该对象将同时具有params和query params:

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