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 标签不起作用，< b > 标签显示为文本。请建议我如何在 IONIC 5 中设置警报中的文本样式。

Answer 1

一句警告由于 Ionic 会清理传递的字符串以避免不安全的 html 注入，因此会出现 html 标签。攻击者可以利用不安全的 html 来协调 XSS 攻击。

Answer 2

以下内容对我有用，因为我使用的是 IONIC 7。@NgModule({&nbsp; &nbsp; declarations: [AppComponent],&nbsp; &nbsp; imports: [&nbsp; &nbsp; &nbsp; &nbsp; BrowserModule,&nbsp; &nbsp; &nbsp; &nbsp; IonicModule.forRoot({ innerHTMLTemplatesEnabled: true }),&nbsp; &nbsp; &nbsp; &nbsp; AppRoutingModule,&nbsp; &nbsp; &nbsp; &nbsp; HttpClientModule],启用内部 HTML 模板。可能需要，因为您的 HTML 正在呈现为纯字符串/文本。启用此功能后，我使用的所有 HTML 标签都会正确呈现希望这可以帮助

Answer 3

subHeader可以使用自定义 CSS 类加粗。在此示例中，即alertCustomClass.主页.ts&nbsp;async presentAlertConfirm() {&nbsp; &nbsp; const alert = await this.alertController.create({&nbsp; &nbsp; &nbsp; header: 'About ' + this.test,&nbsp; &nbsp; &nbsp; subHeader: this.test,&nbsp; &nbsp; &nbsp; message: 'About ' + '<strong>' + this.test + '</strong>',&nbsp; &nbsp; &nbsp; cssClass: 'alertCustomClass',&nbsp; &nbsp; &nbsp; buttons: [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: 'Cancel',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; role: 'cancel',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cssClass: 'secondary',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; handler: (blah) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('Confirm Cancel: blah');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: 'Okay',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; handler: () => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('Confirm Okay');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; });&nbsp; &nbsp; await alert.present();&nbsp; }全局.scss.alertCustomClass {&nbsp; &nbsp; &nbsp; .alert-sub-title {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-weight: bold;&nbsp; &nbsp; &nbsp; }&nbsp;}另外，您可以像这样message粗体使用：<strong>&nbsp; async presentAlertConfirm() {&nbsp; &nbsp; const alert = await this.alertController.create({&nbsp; &nbsp; &nbsp; header: 'Confirm!',&nbsp; &nbsp; &nbsp; message: 'About ' + '<strong>' + this.user.name + '</strong>',&nbsp; &nbsp; &nbsp; buttons: [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: 'Cancel',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; role: 'cancel',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cssClass: 'secondary',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; handler: (blah) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('Confirm Cancel: blah');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: 'Okay',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; handler: () => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('Confirm Okay');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; });&nbsp; &nbsp; await alert.present();&nbsp; }header默认为粗体 ( font-weight:500;)。...&nbsp; &nbsp;header: 'About ' + this.user.name,&nbsp; &nbsp;message: ...,&nbsp; &nbsp;buttons: ,,,....