单击指向另一个页面的链接时如何保留信息答案

【问题标题】：How to retain info when clicking a link to another page单击指向另一个页面的链接时如何保留信息
【发布时间】：2019-10-01 04:10:45
【问题描述】：

我正在使用 Ionic 4 制作一个应用程序，该应用程序显示从数据库中获取的凭证（图像）。我希望显示的每张图片都是指向单独的详细信息页面的链接，该页面显示该特定凭证的更多信息。但是，我很难找到保留所选凭证信息的方法，以便详细信息页面知道要显示哪个凭证。我知道我可以使用 IonicStorage 在本地存储数据，但我不知道如何将当前凭证的数据放入 typescript 端以便进行设置。我知道如何做到这一点的唯一方法是使用 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”中，以便可以在本地存储并因此使用在详细信息页面中显示优惠券的信息。

【问题讨论】：

标签： html angular typescript ionic4

【解决方案1】：

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

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

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

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

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

然后在details组件中订阅router：

constructor(private route: ActivatedRoute)

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

【讨论】：

【解决方案2】：

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

HTML

(click)="openDetails(voucher)"

在ts代码中

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

【讨论】：