ionic : 离子后退按钮上的清除文本字段答案

【问题标题】：ionic : clear text field on ion-back-buttonionic : 离子后退按钮上的清除文本字段
【发布时间】：2021-04-19 10:43:11
【问题描述】：

我正在使用 BarcodeScanner 扫描产品条形码。

扫描条形码后，产品 id 显示在文本字段中，并被发送到另一个页面，我调用 api 并显示产品详细信息。现在在产品详细信息页面上，我有一个返回按钮，可将用户带回扫描页面。

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button default-href=""></ion-back-button>
    </ion-buttons>
    <ion-title>Product Details</ion-title>
  </ion-toolbar>
</ion-header>

返回此页面后，扫描的产品 id 仍然存在于文本字段中，我想要的是在返回后使用我尝试过的返回按钮刷新页面

 ionViewWillEnter() {
  }

那没用。

有人可以告诉我如何实现这一目标

【问题讨论】：

尝试使用 ionViewWillLeave。
你的产品页面是模态的吗？

标签： angular typescript ionic-framework

【解决方案1】：

使用 ionViewDidEnter 你可以这样尝试

.ts 文件

pid: any = "";

constructor(public navCtrl: NavController) {
 
}

ionViewDidEnter() {
 this.pid = "";
}

getid(){
this.pid = '23232'
}

gotoNext() {
this.navCtrl.push(ContactPage, { id: this.pid });
}

.html

<ion-content padding>
<h2> product id : {{pid}} </h2>
<button ion-button (click)="getid()"> get product id </button>
<button ion-button (click)="gotoNext()"> next </button>
</ion-content>

我已经为此创建了一个演示，请看一下

Demo for the Same

【讨论】：