如何使用Ionic Alert实现星级评分弹窗功能？

我之前刚好做过完全符合你需求的星级评分弹窗功能，效果如下：

这个功能我在各类浏览器和移动端平台都测试过，运行稳定无异常。下面是完整的实现代码和细节说明：

实现思路 #

• 借助Ionic Alert的cssClass属性自定义弹窗样式，将星级评分组件嵌入弹窗内容区
• 通过点击事件绑定星级选择逻辑，实时更新星星的选中状态
• 在提交按钮的回调中校验星级选择，确保用户完成评分后再提交

完整代码示例 #

1. 组件TS逻辑代码 #

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

@Component({
  selector: 'app-rating-demo',
  templateUrl: './rating-demo.component.html',
  styleUrls: ['./rating-demo.component.scss'],
})
export class RatingDemoComponent {

  constructor(private alertController: AlertController) { }

  // 打开评分弹窗
  async openRatingAlert() {
    let selectedStar = 0;

    const alert = await this.alertController.create({
      header: '请为我们的服务评分',
      cssClass: 'custom-rating-alert',
      message: `
        <div class="rating-wrapper">
          <ion-icon 
            *ngFor="let star of [1,2,3,4,5]" 
            name="star" 
            [class.active-star]="star <= selectedStar"
            (click)="selectedStar = star"
          >
          </ion-icon>
        </div>
      `,
      buttons: [
        {
          text: '取消',
          role: 'cancel',
          handler: () => {
            console.log('用户取消评分');
          }
        },
        {
          text: '提交',
          handler: () => {
            if (selectedStar === 0) {
              // 未选择星级时阻止弹窗关闭
              return false;
            }
            console.log('用户提交的星级:', selectedStar);
            // 这里可以添加提交到后端的业务逻辑
            return true;
          }
        }
      ]
    });

    await alert.present();
  }
}

2. 自定义SCSS样式 #

.custom-rating-alert {
  .rating-wrapper {
    display: flex;
    justify-content: center;
    margin: 20px 0;

    ion-icon {
      font-size: 36px;
      color: #e0e0e0;
      cursor: pointer;
      margin: 0 4px;
      transition: color 0.2s ease;

      &.active-star {
        color: #ffc107;
      }

      &:hover {
        color: #ffd54f;
      }
    }
  }
}

3. 页面触发按钮 #

在你的页面模板中添加触发弹窗的按钮：

<ion-button expand="block" (click)="openRatingAlert()">打开评分弹窗</ion-button>

功能亮点 #

• 支持点击星星切换选中星级，鼠标悬停时会预览选中效果（移动端适配点击交互）
• 未选择星级时无法提交，避免无效评分
• 样式完全可定制，你可以根据需求调整星星大小、颜色、间距等

内容的提问来源于stack exchange，提问作者Sujit Kumar Singh