ionic基础组件使用：弹出框

https://ionicframework.com/docs/api/alert

使用Controller Alerts方式

点击弹出框的按钮没有加处理逻辑

点击右上角的按钮：

点击弹出框的按钮加上处理逻辑

组件的app.component.ts文件：

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(private alertC: AlertController) { }

  async showAlert() {
    // 弹出框服务，创建一个弹框，然后做具体的处理
    const alert = await this.alertC.create({
      header: '重要通知！',
      subHeader: '今天下午开会',
      message: '讨论下个月的滚动计划',
      buttons: [
        {
          text: '马上',
          handler: () => {
            console.log('马上按钮被点击了')

          }
        },
        {
          text: '取消',
          handler: () => {
            console.log('取消按钮被点击了')

          }
        }
      ]
    })

    await alert.present()
  }
}

组件的app.component.html文件：

点击按钮：