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

Question

在 ionic 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

有点晚了。我今天试图实现这一点，我把它做到了：

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

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

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

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