【ionic】- 侧滑编辑删除

项目进行过程中用到了侧滑修改删除，刚开始使用Ionic4，对于Ionic4的使用不是很熟悉，也许对于大牛来说很简单的一个操作，我却搞了半天，在这里总结一下；

首先什么情况下我们会用到这个侧滑编辑或删除呢，那就是类似于QQ聊天消息式的List列表中，了解了这个我们一步步走着，首先是HTML页中，传参类似于咱们用的跨页面传参，图中是几个需要特别注意的地方，一定要保证自己写的前后一致；

接收页面传过来的参数：

this.activeteRoute.queryParams.subscribe((data: any) => {
      this.id = data.id; // 存放上个页面传过来的值
});

点击删除按钮获取页面参数

deleteTemp(item: any, node: any) {
  node.close();  // 侧滑关闭
  this.id = item.id;  // 接收参数
  this.deleteAlertConfirm();  // 消息弹出框
}

删除提示信息弹出框

/**提交审核弹出框 */
async deleteAlertConfirm() {
  const alert = await this.alertController.create({
  header: '^_^温馨提示',
  message: '请确认是否将该模板删除!',
  buttons: [
    {
      text: '取消',
      role: 'cancel',
      cssClass: 'secondary',
      handler: () => {
        return;
      }
    }, {
      text: '确定',
      handler: () => {
        this.deleteOk(this.id); // 实际需要传递的参数
      }
    }
  ]
  });
  await alert.present();
}

删除方法：

deleteOk(item: any) {  // 这里的item与HTML页中的参数一定要是对应的
  const api = '----/DeleteTemp?id=' + this.id; // 这里是Swagger中测通的地址
  const body = JSON.stringify(this.id);
  this.http.post(api, body).subscribe((Response: any) => {
    this.deleteTempList = Response.json().data;
    if (this.deleteTempList != null) {
      super.showToast(this.toastCtrl, '删除成功');
      location.reload();
    } else {
      super.showToast(this.toastCtrl, '删除失败');
    }
  });
}

到这里呢也基本实现了删除的功能，编辑与删除基本没有不同，就不做细致总结啦；