单击 link 转到另一个页面时如何保留信息

Question

我正在使用 Ionic 4 制作一个应用程序，用于显示从数据库中获取的优惠券（图像）。我希望显示的每张图片都是一个单独的详细信息页面的 link，该页面显示该特定优惠券的更多信息。但是，我无法找到一种方法来保留所选优惠券的信息，以便详细信息页面知道要显示哪个优惠券。我知道我可以使用 IonicStorage 在本地存储数据，但我不知道如何将当前凭证的数据放入 typescript 端以便进行设置。我知道如何做到这一点的唯一方法是使用 ngModel，但这只适用于 forms/input.

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}}（当前凭证数据的名称属性）存入TS变量'voucherName' 以便可以保存在本地，用于在详情页面显示凭证的信息。

Answer 1

您可以将凭证作为 openDetails 的参数传递为

HTML

(click)="openDetails(voucher)"

在ts代码中

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

Answer 2

您根本不需要将其存储在本地存储中，这不是真正的 Angular 做事方式。

相反，您应该使用带参数的路由：

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

并通过路由器发送 name/id：

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

然后在详情组件中订阅路由器：

constructor(private route: ActivatedRoute)

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

单击 link 转到另一个页面时如何保留信息

How to retain info when clicking a link to another page

html

typescript

angular

ionic4