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)"

以ts代码

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

Answer 2

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

您应该使用带有参数的路由：

{
  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
);

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

2 个答案: