Как сохранить информацию при переходе по ссылке на другую страницу

Question

Я создаю приложение с Ionic 4, которое отображает ваучеры (изображения), извлеченные из базы данных. Я хочу, чтобы каждое отображаемое изображение представляло собой ссылку на отдельную страницу с подробной информацией, которая показывает дополнительную информацию для этого конкретного ваучера. Однако у меня возникают проблемы с поиском способа сохранить информацию о выбранном ваучере, чтобы страница сведений знала, какой ваучер отображать. Я знаю, что могу хранить данные локально с помощью IonicStorage, но я не знаю, как перевести данные текущего ваучера на сторону машинописного текста, чтобы их можно было установить. Единственный способ, которым я знаю, как это сделать, это с помощью ngModel, но это работает только для форм / ввода.

HTML:

<ion-item *ngFor="let voucher of vouchers" >
  <ion-label> 
    <a routerLink="/details" routerDirection="forward (click)="openDetails()"><img src='http://example.com/imgs/vouchers/{{voucher.photo}}'></a>

  </ion-label>
</ion-item>

TS:

public voucherName:string;
.
.
.
openDetails()
{
  console.log(this.voucherName);
  this.storage.set('name', this.voucherName);
}

Я хочу, чтобы {{voucher.photo}} или {{voucher.name}} (свойство name текущих данных ваучера) были сохранены в переменной TS 'voucherName', чтобы ее можно было хранить локально и, следовательно, использовать для отображения информации ваучера на странице сведений.

Answer 1

Вы можете передать ваучер как параметр openDetails как

HTML

(click)="openDetails(voucher)"

В тс код

openDetails(voucher)
{
  console.log(voucher.voucherName + '-' + voucher.photo);
  this.storage.set('name', voucher.voucherName);
}

Answer 2

Вам вообще не нужно хранить его в локальном хранилище, это не совсем Angular способ делать вещи.

Вместо этого вам следует использовать маршрутизацию с параметрами:

{
  path: "details/:name/",
  component: DetailsComponent
},

И отправьте имя / идентификатор через маршрутизатор:

[routerLink]="['/details', voucher.name]"

Затем подпишитесь на маршрутизатор в компоненте подробностей:

constructor(private route: ActivatedRoute)

this.route.params.subscribe(params =>
  console.log(params.name); // Name of your clicked voucher
);