ionic2 - 在警报控制器标题和按钮中显示离子图标答案

【问题标题】：ionic2 - show ion-icon in alert controller title and buttonsionic2 - 在警报控制器标题和按钮中显示离子图标
【发布时间】：2018-12-02 17:17:18
【问题描述】：

在 ionic 2 应用程序中，是否可以在警报控制器中添加 ion-icon，如下所示

    let showAlertCtrl = this.alertCtrl.create({
  title: '<ion-icon ios="ios-add" md="md-add"></ion-icon>' +'Add your info',
  cssClass: 'myCustomCSS',
  message: msg,
  enableBackdropDismiss: false,
  buttons: [
    {
      text: '<ion-icon ios="iOS-search" md="md-add"></ion-icon>' +' Ok',
      cssClass: 'customAlertBtn',
      handler: (data: any) => {

      }
    },]
});

showAlertCtrl.present();

需要在标题和按钮上显示 ion-icon 图像。这可能吗？

我也知道我们可以使用模态来实现这一点。但我的首要任务是在警报控制器中检查它。

谢谢 AK

【问题讨论】：

据我所知，Ionic 不支持警报中的ion-icons。上面有一个功能请求：github.com/ionic-team/ionic/issues/7874

标签： angular ionic2 modal-dialog ionic3 ionicons

【解决方案1】：

回复有点晚。我今天尝试实现这一点，我做到了：

在您的 app.scss 中创建一个 css 类，并将该类添加到警报选项“cssClass”中。

app.scss

.yourClass{
  background-image: url(your-image-url);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;  
}

可以根据您的要求更改这些 css 值。

在警报中：

buttons: [
           {
             text: '',
             cssClass: 'yourClass',
             handler: data => {}
          }
        ]

【讨论】：

【解决方案2】：

如果你决定使用一个modal，你可以用css让它看起来像一个alert。例如：

    var z: any = document.getElementsByTagName("ion-modal");
    z[0].style.background = "rgba(0,0,0,0.8)";
    z[0].style.padding = "36px";
    z[0].style.paddingTop = "150px";
    z[0].style.paddingBottom = "226px";
    z[0].childNodes[1].style.borderRadius = "6px";

【讨论】：

【解决方案3】：

你应该使用反引号来解析 html：

title: `<ion-icon ios="ios-add" md="md-add"></ion-icon>Add your info`

【讨论】：

它不起作用，我认为我们只能使用模态