Ionic - InnerHTML 替代方案

Question

我有一个变量，它从我的数据库中获取字符串并将其显示在我的一个面板上。获取的文本包含典型的 HTML 标签，例如<b><u><p>等。

<div [innerHTML]="myVariableWithTags"></div>

这在测试时可以工作ionic lab，但不能在模拟器或真实设备上运行。

所以我的问题是 Ionic 的 innerHTML 的替代品是什么？

例如我的变量myVariableWithTags如下：

<b>This has to be bold</b> <i>and this italic</i>

我想做以下事情：

<div> {{myVariableWithTags}} </div>

并希望看到面板如下所示： 这必须是粗体 ，斜体

代替<b>This has to be bold</b> <i>and this italic</i>

这可能吗？

Answer 1

第 1 步：创建管道

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer} from '@angular/platform-browser';

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

第 2 步：声明并导出app.module.ts

import { SafePipe } from '........';
@NgModule({
    declarations: [
    SafePipe
    ],
    imports: [

    ],
    exports: [
        SafePipe
    ],
    providers: [
    ]
})

步骤 3safe ：在 html 文件上使用管道

<div [innerHTML]="myVariableWithTags | safe"></div>

Answer 2

IONIC-4 版本支持 InnerHTML

<ion-content padding>
    <div [innerHTML]="data"></div>
</ion-content>  

**不要在"<p>"标签内部使用。