ionic4 popovercontorller 简单用例

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

  

 

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

在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: `
    
      
        Learn Ionic
      
      
        Documentation
      
      
        Showcase
      
      
        GitHub Repo
      
      
        Support
      
    
  `
})
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