Angular: установка routerLink queryParams в качестве свойства компонента приводит к ошибке

Когда я связываю queryParams с помощью routerLink в Angular2, я получаю эту ошибку:

[ОШИБКА] Исключение при попытке сериализовать значение

Эта ошибка отображается, когда я проверяю 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"}

Я делаю что-то не так здесь?


angular angular-routerlink routerlink
person Haley Lohrenz    schedule 14.08.2018    source источник
comment
Что такое Params для query: Params? Вы определяете url как string и query как тип Params. Где вы создали этот тип Params?   -  person Narm    schedule 14.08.2018
comment
Эта ошибка оторвана от контекста. Сообщение об ошибке говорит мне столько же о вашей проблеме, сколько о текущей фазе луны.   -  person Antoniossss    schedule 14.08.2018
comment
Извините, query относится к типу object. Я забыл обновить это. Все равно выдает ту же ошибку. Эта ошибка связана с [queryParams] в DOM, когда я проверяю страницу. Поскольку это не выдает мне ошибку в консоли, но просто не показывает ссылки, так что это был мой единственный способ отладки @Antoniossss   -  person Haley Lohrenz    schedule 15.08.2018

Ответы (1)


arrow_upward
0
arrow_downward

По какой-то странной причине я решил это, выполнив следующее:

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

Не уверен, почему мне пришлось присвоить значение переменной, а затем присвоить два значения этой переменной тому, которое используется в шаблоне, но это исправило это.

person Haley Lohrenz    schedule 15.08.2018