ionic4|5 使用PopoverController 控件

效果图

Step 1  TS建立弹出界面组件并引入PopoverController组件

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

@Component({
  selector: 'app-poppickstyle',
  templateUrl: './poppickstyle.component.html',
  styleUrls: ['./poppickstyle.component.scss'],
})
export class PoppickstyleComponent implements OnInit {
  public data: any;

  constructor(
    private popCtl: PopoverController,
  ) { }

  ngOnInit() {}


  onPick(pickId) {
    console.log('pick id===>', pickId);
    this.popCtl.dismiss(pickId);
  }
}

Step 2 HTML 加入要显示的内容

<ion-list class="lHead" lines="false" inset="true"> 
  <div >Report display style</div>
  <ion-item (click)="onPick(1)">
    <ion-icon name="pie-chart-outline"></ion-icon>
    <ion-label>Pie</ion-label>
  </ion-item>
  <ion-item (click)="onPick(2)">
    <ion-icon name="pulse-outline"></ion-icon>
    <ion-label>Line</ion-label>
  </ion-item>
  <ion-item (click)="onPick(3)">
    <ion-icon name="bar-chart-outline"></ion-icon>
    <ion-label>Bar</ion-label>
  </ion-item>
</ion-list> 

Step 3 要使用的地方加入代码

import { Component, OnInit } from '@angular/core';
import { PopoverController } from '@ionic/angular';
import { PoppickstyleComponent } from '../../components/poppickstyle/poppickstyle.component';


@Component({
  selector: 'app-report',
  templateUrl: 'report.page.html',
  styleUrls: ['report.page.scss']
})
export class ReportPage implements OnInit {

  constructor(
    private popoverCtl: PopoverController,
  ) {}

  ngOnInit(): void {
  }

  async presentPopover(ev: any) {
    const popover = await this.popoverCtl.create({
      component: PoppickstyleComponent,
      event: ev,
      translucent: true,
    });

    //这里是传过去的值
    popover.onDidDismiss().then(v => {
      console.log('close pop',  v);
    });
    return await popover.present();
  }

}

参考文献 https://www.freakyjolly.com/ionic-modal-popovers-pass-receive-data/