Angular 离子型HTML替代品

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

等

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

我想做以下工作：

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

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

{{myVariableWithTags}

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

这必须是粗体，而不是斜体，而不是

这可能吗？
步骤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
pipe

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


将
myVariableWithTags
包装在
中。这对我很有用。
爱奥尼亚-4版本支持InnerHTML

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



**不要使用
“”
标记的内部。
我不熟悉ionic，但由于这只是角度，您应该避免设置
innerHTML
。通常添加innerHTML内容如下：
{myModelVariable}
，而
myModelVariable
设置在组件内部，可以包含任何内容。如果您想附加HTML代码并运行它，您应该更好地解释用例，因为这通常是一种不好的做法（并非总是可以避免，但大多数情况下）@messerbill基本上是如果我的字符串包含标记，并且我将div的内容分配为{{myvariablenamegoesere}将显示文本，但标记不会应用任何效果-它们将仅显示为字符。为了提供一个更好的例子，我编辑了上面的文章。这是否可以用另一种方式来代替
innerHTML
？这看起来比初始代码更好…请查看
ngClass
，它允许您动态设置
css
classes@messerbill我知道
ngClass
，但我不认为这是我需要的。我不知道我的字符串可能有什么样式，因此无法使用
ngClass
设置它们。我只想保留字符串可能具有的任何标记，并显示带有效果和样式的文本
[innerHTML]
正是这样做的，但不幸的是，Ionic不支持它。我刚刚尝试过。然而，这对我来说不起作用。它在安卓系统上起作用，IOS呢