如何在Ionic2的Alert Controller中添加评分组件？

你遇到的核心问题是：Ionic的AlertController默认只会渲染简单的HTML文本，不会编译和初始化Angular自定义组件（比如你用的<rating>），因为Alert是动态生成的DOM，不在当前组件的模板上下文里，所以直接把组件标签塞到subTitle里是无效的。

下面给你两个可行的方案，优先推荐第一个，更简单稳定：

方案一：用ModalController模拟Alert体验（推荐） #

Modal可以完整承载Angular组件，能完美支持评分组件的双向绑定和交互，体验和Alert几乎一致。

步骤1：创建评分弹窗组件 #

先写一个自定义的评分弹窗组件，包含评分控件和确认/取消按钮：

// rating-alert.component.ts
import { Component } from '@angular/core';
import { ViewController } from 'ionic-angular';

@Component({
  template: `
    <ion-header>
      <ion-toolbar>
        <ion-title>请给出评分</ion-title>
        <ion-buttons end>
          <button ion-button (click)="dismiss(null)">取消</button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content padding>
      <rating 
        starIconName="md-star" 
        emptyStarIconName="md-star-outline" 
        halfStarIconName="md-star-half"
        [(ngModel)]="userRating">
      </rating>
    </ion-content>
    <ion-footer>
      <button ion-button full (click)="dismiss(userRating)">确认评分</button>
    </ion-footer>
  `
})
export class RatingAlertComponent {
  userRating: number = 0; // 默认初始评分

  constructor(private viewCtrl: ViewController) {}

  // 关闭弹窗并返回评分结果
  dismiss(rating: number | null) {
    this.viewCtrl.dismiss(rating);
  }
}

步骤2：在主组件中调用Modal #

在你需要触发评分的组件里，用ModalController打开这个弹窗，并处理返回的评分结果：

import { ModalController } from 'ionic-angular';
import { RatingAlertComponent } from './rating-alert.component';

// 你的主组件类
export class YourPage {
  constructor(private modalCtrl: ModalController) {}

  addRating() {
    const ratingModal = this.modalCtrl.create(RatingAlertComponent);
    
    // 监听弹窗关闭事件，获取评分结果
    ratingModal.onDidDismiss(rating => {
      if (rating !== null) {
        console.log('用户最终评分:', rating);
        // 在这里添加你的评分处理逻辑，比如提交到后台
      } else {
        console.log('用户取消了评分');
      }
    });

    ratingModal.present();
  }
}

步骤3：在模块中注册组件 #

别忘了在你的页面模块（或根模块）中声明并注册这个动态组件：

// 比如 app.module.ts 或 your-page.module.ts
import { RatingAlertComponent } from './rating-alert.component';

@NgModule({
  declarations: [
    // ...其他已声明的组件
    RatingAlertComponent
  ],
  entryComponents: [
    RatingAlertComponent // 动态创建的组件必须加入entryComponents
  ]
})
export class YourModule {}

方案二：手动在Alert中插入动态组件（进阶） #

如果你一定要用AlertController，可以通过动态创建组件并插入到Alert的DOM中来实现，但需要手动处理组件的生命周期，兼容性稍差：

步骤1：创建独立的评分组件 #

先写一个可复用的评分组件：

// custom-rating.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'custom-rating',
  template: `
    <rating 
      starIconName="md-star" 
      emptyStarIconName="md-star-outline" 
      halfStarIconName="md-star-half"
      [(ngModel)]="rating"
      (ngModelChange)="ratingChange.emit(rating)">
    </rating>
  `
})
export class CustomRatingComponent {
  @Input() rating: number = 0;
  @Output() ratingChange = new EventEmitter<number>();
}

步骤2：在主组件中动态插入组件 #

在触发Alert的方法里，先创建Alert，再手动把评分组件插入到Alert的DOM中：

import { ComponentRef, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
import { AlertController } from 'ionic-angular';
import { CustomRatingComponent } from './custom-rating.component';

export class YourPage {
  private ratingComponentRef: ComponentRef<CustomRatingComponent> | null = null;

  constructor(
    private alertCtrl: AlertController,
    private componentFactoryResolver: ComponentFactoryResolver,
    private viewContainerRef: ViewContainerRef
  ) {}

  addRating() {
    const alert = this.alertCtrl.create({
      title: '请评分',
      buttons: [
        {
          text: '取消',
          role: 'cancel',
          handler: () => {
            console.log('取消评分');
            this.ratingComponentRef?.destroy(); // 销毁组件
          }
        },
        {
          text: '确认',
          handler: () => {
            if (this.ratingComponentRef) {
              console.log('用户评分:', this.ratingComponentRef.instance.rating);
              // 处理评分逻辑
              this.ratingComponentRef.destroy();
            }
          }
        }
      ]
    });

    // 弹窗显示后再插入组件
    alert.present().then(() => {
      // 获取Alert的内容容器（注意Ionic版本可能导致类名变化）
      const alertContent = document.querySelector('.alert-sub-title') || document.querySelector('.alert-message');
      if (alertContent) {
        // 创建组件工厂
        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(CustomRatingComponent);
        // 创建组件实例
        this.ratingComponentRef = this.viewContainerRef.createComponent(componentFactory);
        // 将组件DOM插入到Alert中
        alertContent.appendChild(this.ratingComponentRef.location.nativeElement);
      }
    });
  }
}

步骤3：注册组件 #

同样需要在模块中声明并加入entryComponents：

@NgModule({
  declarations: [CustomRatingComponent],
  entryComponents: [CustomRatingComponent]
})
export class YourModule {}

内容的提问来源于stack exchange，提问作者Soumya Rauth