Передача или обмен данными между двумя компонентами сохраняются между обновлениями

Question

У меня есть список компонентов продукта, который в основном отображает все мои продукты:

<div *ngFor="let product of products">
  <a routerLink="/products/{{ product.url }}" [state]="product">{{ product.name }}</a>
  <p>{{ product.url }}</p>
</div>

Каждый продукт на этой странице должен открывать компонент обновления продукта, из которого я могу просматривать, обновлять и удалять product.

Я попытался передать информацию о продукте из списка продуктов в обновление продукта с помощью атрибута состояния Angular. Вот как я получаю данные в компоненте обновления продукта:

ngOnInit(): void {
    this.pruduct = window.history.state;
}

Все работает, но кажется, что данные теряются после обновления страницы sh. Я решил, что могу использовать локальное хранилище для решения этой проблемы, но у меня есть ощущение, что должен быть лучший способ для такого базового варианта использования. Государство - мой лучший вариант?

Answer 1

Обычно на стороне «Back-end» есть версия сервиса, которая принимает в качестве входных данных также идентификатор одного из элементов. Не могли бы вы подумать об обмене этим идентификатором между списком товаров и страницей, на которой вы показываете отдельный элемент, на чьей странице вы затем go вызываете эту услугу (с идентификатором на входе)? Что-то вроде /products/{{id}} сервиса.

Я думаю, что это лучший способ управлять им. При таком подходе вы также можете решить добавить информацию на дисплей одного продукта и оставить страницу списка с меньшим количеством информации.

Другое возможное решение - сохранить весь список продуктов в пределах localStorage и вспомнить из этого списка только тот продукт, который вам нужен, на одной странице.

Другие решения не приходят мне на ум.