ionic-framework - Toast 消息中的按钮处理程序 Ionic 4 未触发，为什么？

Question

我正在尝试使用 Ionic ion-toast。我在他们的网站上找到了这个例子:https://ionicframework.com/docs/api/toast

现在我的问题是:上面添加的任何按钮的“处理程序”回调都不会被调用，并且不会出现日志。我在 Android 设备和 Safari 浏览器 MacOS 上尝试了此代码，两者都显示相同的问题。

我尝试使用toast.onDidDismiss().then(()=>{ console.log('已关闭'); })但这并没有帮助，因为我计划添加多个按钮，并且我想区分单击的是哪个按钮。

• 我知道我可以构建自己的组件来执行此操作，但我想知道我的代码中是否缺少某些内容，或者这是 ion-toast 的一个众所周知的问题。

代码:

  async presentToastWithOptions() {    
    const toast = await this.toastController.create({
      header: 'Toast header',
      message: 'Click to Close',
      position: 'top',
      buttons: [
        {
          side: 'start',
          icon: 'star',
          text: 'Favorite',
          handler: () => {
            console.log('this log should appear when this icon is clicked.');
          }
        }, {
          text: 'Done',
          role: 'cancel',
          handler: () => {
            console.log('This log should appear when I click done.');
          }
        }
      ]
    });
    await toast.present();
  }

所以我的期望是:当我单击“完成”按钮或“星号”图标(这是添加到 toast 的 2 个按钮)时，我应该在控制台中看到相应的 console.log，但实际上我在控制台中什么也没有得到。

我也尝试添加断点，但这两个“处理程序”回调都从未被调用。

控制台中没有错误消息...甚至没有相关警告。

这正常吗？或者我错过了什么？

Answer 1

您只需从“完成”按钮对象中删除role: 'cancel'，它们就会开始按预期工作。