PopoverController Ionic 4？

Posted 2021-03-30

PopoverController如何在Ionic 4中运行？

目前的文档是不正确的，并没有发生重大变化？

const popover = this.popoverCtrl.create({
  component: 'PopupMenuComponent',
  ev: event
});

popover.present();

我创建了一个Component，当我尝试呈现它时，我收到以下错误...

[ts] Property 'present' does not exist on type 'Promise<htmlIonPopoverElement>'. Did you forget to use 'await'?

谢谢。

答案

在你的例子中，你没有等待它。从Alpha-7开始，create方法返回一个承诺。你可以找到最新的文件here。请看这个例子：

import { Component } from '@angular/core';
import { PopoverController } from '@ionic/angular';

@Component({
    template: `
        <ion-list no-margin>
            <ion-item (click)="onDismiss()">Dismiss</ion-item>
        </ion-list>
    `
})
export class PopupMenuComponentPopover {
    constructor(private popoverCtrl: PopoverController) {

    }

    async onDismiss() {
        try {
            await this.popoverCtrl.dismiss();
        } catch (e) {
            //click more than one time popover throws error, so ignore...
        }

    }
}

以下是如何打开它：

  async openPopover(args) {
    const popover = await this.popoverController.create({
      component: PopupMenuComponentPopover,
      ev: args,
      translucent: false
    });
    return await popover.present();
  }

编辑：这是你可以称之为：

@NgModule({
  ...
  declarations: [DashboardWebsiteMorePopover],
  entryComponents: [DashboardWebsiteMorePopover],
  ...
})
export class PopupMenuComponentModule {}