Ionic 2 - Symbol in Alarm

Question

Ich möchte Symbol in meiner Warnmeldung hinzufügen, aber es scheint nach dem Aufbau zu verschwinden.

Hier ist der Code:

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

Und das Ergebnis:

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

Ich weiß nicht wirklich, wie Sie vorgehen zu bekommen, was ich will. Irgendwelche Ideen?

Answer 1

Soweit ich weiß, unterstützt Ionic2 Symbole in Warnungen nicht.

Es gibt eine Feature-Anfrage auf ihre Github Repo: https://github.com/driftyco/ionic/issues/7874

Answer 2

Sie so etwas wie dies versuchen könnte:

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

Irgendwie ionische/Winkel Tag funktioniert nicht in _htmlproperty so müssen wir verwenden Planen Sie HTML-Tags und CSS-Klassen.

Zweite Option: Sie könnten Ihre eigenen benutzerdefinierten Popup wie vorgeschlagen here.