ionic2-在警報控制器標題和按鈕中顯示ion-icon

Question

在離子2應用中，可以在警報控制器中添加離子圖標 ，如下所示

    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();      

需要在標題和按鈕上同時顯示離子圖標圖像。 那可能嗎？

我也知道我們可以使用模式來實現這一目標。 但我的首要任務是在警報控制器中檢查它。

謝謝AK

Answer 1

您應該使用反引號來解析html：

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

Answer 2

如果您決定使用模式，可以使用CSS使其看起來像是警報，例如：

    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";

Answer 3

有點遲到了。 我今天試圖實現這一目標，並做到了：

在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 => {}
          }
        ]