Question

考虑从内部CMS返回的此对象

export declare interface ContentItem {
    id: string;
    title: string;
    subTitle: string;
    clickUrl: string;
    imageUrl: string;
    contentType: string;
    ...
}

clickUrl将有一个完整的网址，导航到有效的角度路线。我正在寻找一种在routerLink指令中使用此URL的方法;像这样的东西

<a [routerLink]="contentItem.clickUrl">click me</a>

我的问题是这个网址包含查询参数。该指令将逃脱＆＃39;？＆＃39;，＆＃39; =＆＃39;和＆＃39;＆amp;＆＃39;网址中的字符。

我知道我们可以通过这样的查询参数：

[queryParams]="{ articleId: contentItem.id }"

但是，如果不从前面提到的clickUrl中删除查询参数部分，这不起作用。

Answer 1

您可以使用控制器代替routerLink。

<a (click)="goTo(contentItem.clickUrl)">click me</a>

在控制器中：

this.goTo(url) {
  this.router.navigateByUrl(url);
}

Answer 2

因为我看到你的问题基本上是你需要坚持以前的查询参数，但也添加新的。 Angular附带一个选项'queryParamsHandling'来保留或合并。默认情况下，查询参数在任何后续导航操作中都会丢失：

this.router.navigate(['/url'], { queryParamsHandling: 'preserve' });

也可以使用'merge'选项

e.g。

this.router.navigate(['/url?order=popular'], { queryParams: { filter: 'new'}, queryParamsHandling: 'merge' });
// result http://localhost/url?order=popular&filter=new

如何在routerLink指令中使用完整的URL字符串（带有查询参数）？

2 个答案: