HTML 标签在 Ionic 5 警报文本中不起作用

Question

我已将以下代码从 Ionic 3 迁移到 Ionic 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();

在 Ionic 3 中，用户名以粗体显示，但在 Ionic 5 中，HTML 标签不起作用， 标签显示为文本。 请建议我如何在 IONIC 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.scss

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

---

另外，您可以使用<strong> 加粗message like this：

  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: ,,,.
...