如何通过控制器在离子模态上使用事件答案

【问题标题】：How to use Events on ionic modal with a controller如何通过控制器在离子模态上使用事件
【发布时间】：2022-12-29 01:34:48
【问题描述】：

我在 nuxt 项目上使用 ionic 6，我想展示一个模态。所以我使用离子模式的控制器（https://ionicframework.com/docs/api/modal#controller-modals）。

但我不知道如何将那里的事件 (https://ionicframework.com/docs/api/modal#events) 与控制器一起使用。

我想在断点更改时使用事件“ionBreakpointDidChange”来更改我的模态内容。

这是我的控制器

modal = await modalController.create({
    component: Modal,
    breakpoints: [0, 0.2, 0.5, 1],
    initialBreakpoint: 0.5,
    backdropBreakpoint: 1,
    backdropDismiss: false,
  })
  modal.present()

如果有人能帮助我，那就完美了

我尝试：

modal.addEventListener('ionBreakpointDidChange', () => {})
modal.ionBreakpointDidChange(() => {})

【问题讨论】：

标签： ionic-framework nuxt.js vuejs3 nuxtjs3 ionic6

【解决方案1】：

对于离子 4+：

modal = await modalController.create({
    component: Modal,
    breakpoints: [0, 0.2, 0.5, 1],
    initialBreakpoint: 0.5,
    backdropBreakpoint: 1,
    backdropDismiss: false,
  });
modal.ionBreakpointDidChange().then(() => {
  *what you want to happen*
});
modal.present();

但由于您使用的是 Ionic 6，我建议您使用内联版本，它更简单，并且由 docs 推荐：

  <ion-modal [initialBreakpoint]="..." [breakpoints]="[...] (ionBreakpointDidChange)="...">
    <ng-template>
        * your modal *
    </ng-template>
  </ion-modal>

【讨论】：

【解决方案2】：

我花了最后几个小时寻找使用 Controller Modals 在 Ionic 6 中添加事件侦听器的解决方案。

解决方案是在模态实例中添加一个事件侦听器，其中包含您想要的事件。

对于以后阅读它的任何人，请确保使用 kebab-case 作为事件名称，而不是 camelCase 事件名称。（只是浪费了几个小时才搞清楚）

const modal = await modalController.create({
    component: YourComponent,
});
modal.present();
modal.addEventListener("did-present",()=>{
    console.log("did-present modal WORKS!");
});
modal.addEventListener("didPresent",()=>{
    console.log("didPresent modal WILL NOT TRIGGER");
});

我最大的错误是使用modal.addEventListener("didPresent" ...
而不是正确答案modal.addEventListener("did-present"...（烤肉串）

所以对于你的问题，答案将是

modal.addEventListener("ion-breakpoint-did-change",()=>{...

【讨论】：