Question

我想在我的提醒消息中添加图标，但它在构建后似乎消失了。

以下是代码：

openAppointmentPop(){
    let appointmentpop = this.alertCtrl.create({
        title: 'Rendez-vous',
        message: `
            <p><ion-icon ios="ios-calendar" md="md-calendar"></ion-icon> 26 février 2016</p>
            <p><ion-icon name="pin"></ion-icon> 52, rue des Paquerette</p>

            `,
    buttons: [
      {
        text: 'Modifier',
        handler: () => {
          console.log('Disagree clicked');
        }
      },
      {
        text: 'Retour',
        handler: () => {
          console.log('Agree clicked');
        }
      }
    ]           
    });
    appointmentpop.present();
}

结果：

<div class="alert-message" id="alert-msg-0">
    <p> 26 février 2016</p>
    <p> 52, rue des Paquerette</p>    
</div>

我真的不知道如何继续得到我想要的东西。有什么想法吗？

Answer 1

您可以尝试这样的事情：

  private _htmlProperty: string = "<p><span name=\"alarm\" style=\"display:inline-block;font-family:Ionicons;\" class=\"icon icon-md ion-md-alarm\"></span> 26 février 2016</p><p><div name=\"pin\" style=\"display:inline-block;font-family:Ionicons;\" class=\"icon icon-md ion-md-alarm\"></div> 52, rue des Paquerette</p>";

  public htmlProperty() {
    return this._sanitizer.bypassSecurityTrustHtml(this._htmlProperty);
  }

  openAppointmentPop() {
    let appointmentpop = this.alertCtrl.create({
      title: 'Rendez-vous',
      message: <any> this.htmlProperty(),
      buttons: [
        {
          text: 'Modifier',
          handler: () => {
            console.log('Disagree clicked');
          }
        },
        {
          text: 'Retour',
          handler: () => {
            console.log('Agree clicked');
          }
        }
      ]
    });
    appointmentpop.present();
  }

以某种方式，离子/角度标签在 _htmlproperty 中不起作用，因此我们需要使用plan html标签和css类。

第二个选项：您可以按照建议here制作自己的自定义弹出窗口。

Answer 2

据我所知，Ionic2不支持警报中的图标。

他们的Github回购中有一个功能请求：https://github.com/driftyco/ionic/issues/7874

Answer 3

我有解决方案。它可以在Ionic v3上完美运行，但也应在版本2上运行。请参阅下面的链接： https://forum.ionicframework.com/t/icon-in-toast/113750/4

离子2 - 警告中的图标

3 个答案: