离子 - InnerHTML 替代品答案

【问题标题】：Ionic - InnerHTML alternative离子 - InnerHTML 替代品
【发布时间】：2019-06-07 07:59:52
【问题描述】：

我有一个变量，它从我的数据库中获取一个字符串并将其显示在我的一个面板上。获取的文本包含典型的 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>

这可能吗？

【问题讨论】：

我不熟悉 ionic，但由于这只是角度问题，您应该避免设置 innerHTML。通常你会像这样添加innerHTML 内容：<div>{myModelVariable}</div> 而myModelVariable 设置在组件内部并且可以包含任何内容。如果您想附加 HTML 代码并使其运行，您应该更好地解释用例，因为这主要是一种不好的做法（并非总是可以避免，但主要是）
@messerbill 基本上，如果我的字符串包含标签并且我将 div 的内容分配为 {{myVariableNameGoesHere}} 将显示文本，但标签不会应用任何效果 - 它们只会显示为字符.我编辑了上面的帖子以提供更好的示例。是否可以通过其他方式而不是innerHTML 来实现？
这看起来比初始代码更好......看看这里angular.io/api/common/NgClass
查看ngClass，它允许您动态设置css 类
@messerbill 我知道ngClass 但是我不相信这是我需要的。我不知道我的字符串可能有什么样式，所以我无法使用ngClass 设置它们。我只想保留字符串可能具有的任何标签并显示带有效果和样式的文本。 [innerHTML] 正是这样做的，但不幸的是 Ionic 不支持它。

标签： angular ionic-framework innerhtml

【解决方案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>

【讨论】：

我刚刚试过了。但是，这对我不起作用。

【解决方案2】：

IONIC-4 版本支持 InnerHTML

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

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

【讨论】：

【解决方案3】：

将myVariableWithTags 包装在<span> 中。这对我有用。

【讨论】：