角度:将路由器链接查询参数设置为组件属性会导致错误

Question

当我在 Angular2 中使用routerLink绑定queryParams时，出现此错误：

[错误] 尝试序列化值时出现异常

当我检查 DOM 时显示此错误。链接根本不显示在页面上，因此这是我唯一的调试方法，因为控制台中也没有错误。

DOM 的屏幕截图

组件代码

export class FormatUrlLinkComponent implements OnInit {
@Input('url') apiUrl: string;
@Input('text') linkText: string;
validUrl: {
url: string,
query: object
} = {
url: '',
query: {}
};
constructor() { }
ngOnInit() {
// Format url into a valid url for routerLink
this.validUrl = queryString.parseUrl(this.apiUrl);
console.log(this.validUrl.query);
}
}

模板代码

<a [routerLink]="validUrl.url" [queryParams]="validUrl.query"></a>

当我执行console.log(this.validUrl.query)时，我看到以下内容：

{Ntt: "welded"}

我在这里做错了什么吗？

Answer 1

出于某种奇怪的原因，我通过这样做解决了它：

// Format url into a valid url for routerLink
const validUrl = queryString.parseUrl(this.apiUrl);
this.validUrl.url = validUrl.url;
this.validUrl.query = validUrl.query;

不知道为什么我必须将值分配给一个变量，然后将该变量中的两个值分配给模板中使用的值，但这修复了它。