时间戳

首页 > 解决方案 > Angular：将 routerLink queryParams 设置为组件属性会导致错误

angular - Angular：将 routerLink queryParams 设置为组件属性会导致错误

问题描述

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

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

当我检查 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"}

我在这里做错了吗？

标签： angularrouterlinkangular-routerlink

解决方案

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

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

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

推荐阅读