Html 如何在单击指向其他页面的链接时保留信息

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

HTML:

---

我希望将{voucher.photo}或{voucher.name}（当前凭证数据的name属性）存储到TS变量“voucherName”中，以便它可以本地存储，从而用于在详细信息页面中显示凭证的信息。

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

HTML

在ts代码中

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

---

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

HTML

在ts代码中

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

---

您根本不需要将其存储在本地存储中，这并不是一种真正有棱角的方式

相反，应使用带参数的布线：

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

并通过路由器发送名称/id：

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

然后在详细信息组件中订阅路由器：

constructor(private route: ActivatedRoute)

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

---

您根本不需要将其存储在本地存储中，这并不是一种真正有棱角的方式

相反，应使用带参数的布线：

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

并通过路由器发送名称/id：

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

然后在详细信息组件中订阅路由器：

constructor(private route: ActivatedRoute)

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