ionic2

Question

我使用 ionic2（+ angular2 使用 javascript，而不是打字稿）创建了一个 toast，用户从列表中删除了一个项目。

到目前为止一切顺利，现在我想在 toast 中添加一个按钮 Undo（用撤消替换关闭）以将其放回列表中，同时关闭 toast。

到目前为止我的代码：

archiveItem(item) {
    let toast = Toast.create({
        message: 'Item archived.',
        duration: 2000,
        showCloseButton: true,
        closeButtonText: 'Undo',
        dismissOnPageChange: true,
    });

    var index = this.items.indexOf(item);
    this.items.splice(index, 1); //remove the item


    toast.onDismiss(() => {
        console.log('Dismissed toast');
        this.items.splice(index, 0, item); //put back the item on right place
    });


    this.nav.present(toast);
}

当我单击 Undo 时，项目 returns 出现在列表中，问题是如果我不单击它，它也会返回到列表中。

我想我需要为 Undo 创建另一个函数，但我不知道该怎么做，Ionic2 DOCS 也没有谈论它...

谢谢:)

Answer 1

编辑：

试试这个：

 toast.onDismiss((data, role) => {    
        console.log('Dismissed toast');
        if (role== "close") {
           this.items.splice(index, 0, item); //put back the item on right place
        }
    });

编辑：为清楚起见重命名参数

Answer 2

在 Ionic 4 中，这对我有用：

    toast.onDidDismiss().then(val => {
      if (val.role== "cancel") {
       //Action
     }
  });

ionic2 - 仅当用户在 Toast 中单击 "close" 时才创建函数

ionic2 - create function only when user clicks "close" inside Toast

javascript

angular

toast

undo