HTML теги не работают в Ioni c 5 Текст оповещения

Question

Я перенес следующий код из Ioni c 3 в Ioni c 5

   const alert = await this.alertCtrl.create({
      subHeader: "About" + " <b>" + this.user.name + "</b>",
      message: "Test Messgae",
      buttons: [
        {
          text: 'Close',
          role: 'cancel',
          handler: () => {
          }
        }
      ]
    });
    await alert.present();

В Ioni c 3 имя пользователя отображается жирным шрифтом, но в Ioni c 5 теги HTML не работают, а теги отображаются в виде текста. Подскажите, пожалуйста, как мне оформить текст в оповещении в IONI C 5.

Answer 1

subHeader может быть выделен жирным шрифтом, используя пользовательский класс CSS. В этом примере это alertCustomClass.

home.page.ts

 async presentAlertConfirm() {
    const alert = await this.alertController.create({
      header: 'About ' + this.test,
      subHeader: this.test,
      message: 'About ' + '<strong>' + this.test + '</strong>',
      cssClass: 'alertCustomClass',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: (blah) => {
            console.log('Confirm Cancel: blah');
          }
        }, {
          text: 'Okay',
          handler: () => {
            console.log('Confirm Okay');
          }
        }
      ]
    });

    await alert.present();
  }

global.s css

.alertCustomClass {
      .alert-sub-title {
          font-weight: bold;
      }
 }

---

Кроме того, вы можете выделять жирным шрифтом message, используя <strong> , как это :

  async presentAlertConfirm() {
    const alert = await this.alertController.create({
      header: 'Confirm!',
      message: 'About ' + '<strong>' + this.user.name + '</strong>',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: (blah) => {
            console.log('Confirm Cancel: blah');
          }
        }, {
          text: 'Okay',
          handler: () => {
            console.log('Confirm Okay');
          }
        }
      ]
    });

    await alert.present();
  }

header будет выделен жирным шрифтом (font-weight:500;) по умолчанию.

...
   header: 'About ' + this.user.name,
   message: ...,
   buttons: ,,,.
...