ionic3 带数据返回上一页

确认订单添加地址功能

进入确认订单页面

点击添加地址,进入地址列表页面

点击地址列表返回确认订单页面,带回所选地址

具体实现:

确认订单添加地址代码如下

<ion-list>
      <ion-item (click)="goAddress()" *ngIf="addressFlag == false">
        <ion-avatar item-start>
          <img src="../../assets/imgs/add_address.png">
        </ion-avatar>
        <p>添加收货地址</p>
      </ion-item>
</ion-list>

执行 goAddress()方法

  goAddress() {
    let data: Object = {  order:1,  callback: data => { //回调函数,返回页面的数据在回调函数中处理
      console.log(data.info)
          this.addressFlag = false;
          this.name = data.info.name;
          this.phone = data.info.phone;
          this.address = data.info.address;
        } 
      };
    this.navCtrl.push(AddressPage,data);//确认订单页面 挑战到地址列表页面
  }

地址列表页面 

<ion-list class="mb80">
    <ion-item no-padding class="no-border-top mb10" *ngFor="let item of addressLists,let i = index">
      <div class="padl15 border-bottom padr15 mt10 padb10" (click)="checkAddress(item)">
        <h2 class="of mb5">
          <span float-left>{{item.name}}</span>
          <span float-right>{{item.phone}}</span>
        </h2>
        <p>
          <span class="red" [hidden]="item.is_default == 'N'">[默认地址]</span> {{item.address}}</p>
      </div>
      <div class="padl15 padr15 of padt5 padb5">
        <div float-left>
          <button ion-button icon-start clear (click)="setAddress(item,addressLists)">
            <ion-icon *ngIf="item.is_default == 'Y'" name="checked"></ion-icon>
            <ion-icon *ngIf="item.is_default == 'N'" name="check"></ion-icon>
            默认地址 
          </button>
        </div>
        <div float-right>
          <button ion-button icon-end clear (click)="goEdit(item)">
            <ion-icon name="edit"></ion-icon>编辑</button>
          <button ion-button icon-end clear (click)="delete(item)">
            <ion-icon name="del"></ion-icon>删除</button>
        </div>
      </div>
    </ion-item>
  </ion-list>

执行 checkAddress(item)方法

 //确认订单-选择地址
  checkAddress(item) {
    let callback = this.navParams.get('callback');
    let data: Object = {
      info: item
    };
    callback(data);
    this.navCtrl.pop();
   
  }

这样就完成了带参数返回页面

原文地址:https://www.cnblogs.com/summer-qd/p/9605414.html