ionic 对话框

Ionic 对话框（Alert / Action Sheet / Toast）最全实战合集

（Ionic 7+ 最新版，一份代码 iOS & Android 都超漂亮）

组件	用途	推荐指数
ion-alert	确认 / 提示 / 输入框弹窗	5 stars
ion-action-sheet	底部操作菜单（微信式）	5 stars
ion-toast	轻提示（保存成功、已复制等）	5 stars
ion-loading	加载中（之前讲过，这里顺带对比）	5 stars

1. ion-alert（最万能的对话框）

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

constructor(private alertCtrl: AlertController) {}

// 基础确认框
async showConfirm() {
  const alert = await this.alertCtrl.create({
    header: '确认删除',
    message: '此操作不可恢复，确定要删除吗？',
    backdropDismiss: false,           // 点击背景不关闭
    buttons: [
      {
        text: '取消',
        role: 'cancel',
        cssClass: 'alert-cancel'
      },
      {
        text: '确定删除',
        role: 'destructive',           // iOS 红色高亮，Android 也醒目
        handler: () => {
          this.deleteItem();
        }
      }
    ]
  });
  await alert.present();
}

// 带输入框的弹窗（改密码、备注等）
async showInputAlert() {
  const alert = await this.alertCtrl.create({
    header: '修改昵称',
    inputs: [
      {
        name: 'nickname',
        type: 'text',
        placeholder: '输入新昵称',
        value: this.user.nickname
      }
    ],
    buttons: [
      { text: '取消', role: 'cancel' },
      {
        text: '确定',
        handler: (data) => {
          this.updateNickname(data.nickname);
        }
      }
    ]
  });
  await alert.present();
}

// 单选弹窗（选择性别、城市等）
async showRadioAlert() {
  const alert = await this.alertCtrl.create({
    header: '选择性别',
    inputs: [
      { type: 'radio', label: '男', value: 'male', checked: true },
      { type: 'radio', label: '女', value: 'female' },
      { type: 'radio', label: '保密', value: 'secret' }
    ],
    buttons: [
      { text: '取消', role: 'cancel' },
      { text: '确定', handler: (value) => console.log(value) }
    ]
  });
  await alert.present();
}

2. ion-action-sheet（底部操作菜单，超常用！）

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

async showActionSheet() {
  const actionSheetCtrl.create({
    header: '选择操作',
    subHeader: '订单 #10086',
    backdropDismiss: true,
    buttons: [
      {
        text: '删除',
        role: 'destructive',
        icon: 'trash',
        handler: () => this.deleteOrder()
      },
      {
        text: '查看详情',
        icon: 'eye',
        handler: () => this.navCtrl.navigateForward('/order/10086')
      },
      {
        text: '分享',
        icon: 'share-social'
      },
      {
        text: '取消',
        role: 'cancel',
        icon: 'close'
      }
    ]
  }).then(sheet => sheet.present());
}

3. ion-toast（轻提示，必备！）

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

async showToast(message: string, color = 'success') {
  const toast = await this.toastCtrl.create({
    message,
    duration: 2000,                 // 自动消失时间
    position: 'bottom',             // top / middle / bottom
    color,                          // success / warning / danger
    buttons: [
      {
        text: '知道了',
        role: 'cancel'
      }
    ]
  });
  await toast.present();
}

// 常用快捷调用
this.showToast('复制成功');
this.showToast('网络异常，请重试', 'danger');
this.showToast('已添加到收藏', 'warning');

4. 全局封装（强烈推荐！放 service 里全局调用）

// ui.service.ts
@Injectable({ providedIn: 'root' })
export class UIService {
  constructor(
    private alertCtrl: AlertController,
    private actionSheetCtrl: ActionSheetController,
    private toastCtrl: ToastController
  ) {}

  // 通用确认框
  async confirm(header: string, message: string, okHandler: () => void) {
    const alert = await this.alertCtrl.create({
      header,
      message,
      buttons: [
        { text: '取消', role: 'cancel' },
        { text: '确定', handler: okHandler }
      ]
    });
    await alert.present();
  }

  // 通用 toast
  toast(msg: string, color = 'dark') {
    this.toastCtrl.create({
      message: msg,
      duration: 2000,
      position: 'bottom',
      color
    }).then(t => t.present());
  }
}

使用：

constructor(private ui: UIService) {}

this.ui.confirm('退出登录', '确定要退出吗？', () => {
  this.logout();
});

this.ui.toast('登录成功');

5. 超美自定义样式（很多大厂都这么玩）

// 自定义 alert 按钮颜色
.my-alert {
  --color: #333;
  .alert-button[role="destructive"] {
    color: #f55 !important;
  }
}

使用：

const alert = await this.alertCtrl.create({
  cssClass: 'my-alert',
  // ...
});

6. 一句话总结最常用写法

// 删除确认（全项目复制粘贴）
this.alertCtrl.create({
  header: '提示',
  message: '确定删除吗？',
  buttons: [
    { text: '取消', role: 'cancel' },
    { text: '删除', role: 'destructive', handler: () => this.doDelete() }
  ]
}).then(a => a.present());

// 成功提示
this.toastCtrl.create({ message: '操作成功', duration: 2000, color: 'success' })
  .then(t => t.present());

这样写出来的对话框：

• iOS 是毛玻璃半透明 + 圆角
• Android 是 Material Design 阴影
• 自动适配暗黑模式
• 完全原生手感

需要我直接发你一个「包含所有弹窗类型 + 全局封装 + 超美样式」的完整 service 文件吗？一句话就发～