Как сериализовать элемент из итератора при его передаче с использованием строки запроса в Angular routerLink?

Question

У меня есть итератор, и идея состоит в том, чтобы создать вложенное представление (для изданий более гладкое отображение и т. Д. c.). Связь работает так, как предполагалось, и стратегия заключалась в том, чтобы извлекать подмножество данных при загрузке компонента sub.view. В связи с юридическими и финансовыми проблемами мы предпочитаем предоставлять уже загруженные данные и направлять подвид из суперпредставления, а не из API.

<div *ngFor="let item of items">
  <a routerLink="{{'feature/subview/'}}"
     [queryParams]="{origin: ...,data:item}">Click me for {{item.name}}</a>
  {{item.this}} and {{item.that}} ...
</div>

Я обнаружил это, хотя значения элемента доступны для суперкомпонента и отображаются должным образом; при маршрутизации строка запроса содержит текст [объект объекта] , а не его фактическую сериализацию. Как заставить сериализацию item , который передается в строке запроса?

В качестве альтернативы, я должен передать данные, используя другие средства, чем строка запроса? Передаваемые данные всегда будут небольшими, возможно, максимум 1000 символов, часто ниже 100 символов, поэтому имеет смысл использовать строки запроса, но я открыт для других подходов, если это не перебор.

Answer 1

Хорошие стандарты кодирования требуют разделения ответственности. Это определенно требует обслуживания, чтобы обработать получение и установку данных. Компоненты должны быть тупыми и должны принимать данные только из службы, ввода или системы управления состоянием.

Помимо этих стандартов, есть два других способа, которыми вы можете просто использовать строку запроса, и иметь это красиво. Используйте методы JSON.stringify и JSON.parse для получения и установки queryParams.

<a routerLink="feature/subview" [queryParams]="getQueryParams(item)">
  Click me for {{item.name}}
</a>

getQueryParams(item): any {
  return { query: JSON.stringify({
    origin: ...,
    data:item
  }) };
}

Затем вы можете получить этот запрос в другом компоненте:

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
  // ignoring possible obvious undefined errors
  const item = JSON.parse(this.route.snapshot.params.query).query;
}

---

Другим способом может быть использование toString() метода:

<a routerLink="feature/subview" [queryParams]="getQueryParams(item)">
  Click me for {{item.name}}
</a>

getQueryParams(item): any {
  return {
    origin: ...,
    data: item,
    toString() {
      return JSON.stringify(this)
    }
  };
}

Я считаю, что вам больше не нужно использовать JSON.parse для своего снимка, но я могу ошибаться

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
  const { origin, data } = this.route.snapshot.params;
}