Question

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

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

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

所以我的问题是，对于Ionic，innerHTML的替代方案是什么？

例如，我的变量myVariableWithTags如下：

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

我要执行以下操作：

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

，并希望看到如下所示的面板： 必须为粗体 和此斜体

代替This has to be bold and this italic

这可能吗？

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: [
    ]
})

第3步：在HTML文件上使用safe管道

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

Answer 2

将myVariableWithTags包裹在中。这对我有用。

Answer 3

IONIC-4版本支持的InnerHTML

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

**请勿在{{1}}标记内使用。

Ionic-InnerHTML替代

3 个答案: