ionic4 popovercontorller 简单用例

在我们用ionic 4 进行app  的开发需要使用类似以下的 功能：

  

 

我们在点击事件时 加载的是页面   

    <ion-button (click)="presentPopover($event)">
        <ion-icon slot="icon-only" name="more"></ion-icon>
      </ion-button>

在ts文件的  presentPopover()  的内容如下：

需要导入   PopoverController  模块 

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

constructor(public popoverCtrl: PopoverController) { }
async presentPopover(event: Event) {
    const popover = await this.popoverCtrl.create({
      component: PopoverPage,
      event
    
    });

   return await popover.present();

 这里的  PopovePage  就是你要加载过来的页面 内容如下：

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

@Component({
  template: `
    <ion-list>
      <ion-item button (click)="close('https://ionicframework.com/docs/v2/getting-started')">
        <ion-label>Learn Ionic</ion-label>
      </ion-item>
      <ion-item button (click)="close('https://ionicframework.com/docs/v2')">
        <ion-label>Documentation</ion-label>
      </ion-item>
      <ion-item button (click)="close('https://showcase.ionicframework.com')">
        <ion-label>Showcase</ion-label>
      </ion-item>
      <ion-item button (click)="close('https://github.com/ionic-team/ionic')">
        <ion-label>GitHub Repo</ion-label>
      </ion-item>
      <ion-item button (click)="support()">
        <ion-label>Support</ion-label>
      </ion-item>
    </ion-list>
  `
})
export class PopoverPage {
  constructor(public popoverCtrl: PopoverController) {}

  support() {
    // this.app.getRootNavs()[0].push('/support');
    this.popoverCtrl.dismiss();
  }

  close(url: string) {
    window.open(url, '_blank');
    this.popoverCtrl.dismiss();
  }
}

这样就ok 了！ 

还有 ionic3 的PopoverContorller   官方文档：https://ionicframework.com/docs/api/popover