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

Question

我正在尝试使用 Ionic 离子烤面包。我在他们的网站上找到了这个示例：https ://ionicframework.com/docs/api/toast

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

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

• 我知道我可以构建自己的组件来执行此操作，但我想知道我的代码中是否缺少某些内容，或者这是 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'从“完成”按钮对象中删除，它们就会开始按预期工作。