Question

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

[ERROR]尝试序列化值时发生异常

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

不确定为什么我必须将值分配给变量，然后将变量中的两个值分配给模板中正在使用的值，但这已将其固定。

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

1 个答案: