Question

我创建一个JSON键值对，其中包含要注入HTML代码的组件选择器。

testSelector = {
    keyOne: '<selector1></selector1>', keyTwo: '<selector2></selector2>', keyThree: '<selector3></selector3>'
};

在HTML

<div cdkDropList class="example-container" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let item of testSelector | keyvalue" cdkDrag>
    <div class="title">{{item.key}}</div>
    <div class="contetnt">{{item.value}}</div>
  </div>
</div>

创建视图时，选择器将呈现为字符串。是否可以将其渲染为dom标签？

Answer 1

您可以使用数据绑定来呈现HTML：

<div class="title" [innerHTML]="item.key"></div>

Live Demo

Answer 2

正如前面的回答所指出的那样，innerHtml应该使您达到所需的行为，但是如果您要呈现“复杂” HTML，则必须考虑您的内容可以是'sanitized'。

这是我通常在项目中使用的消毒管道的实现：

@Pipe({
  name: 'safeHtml'
})

export class SafeHtmlPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) {
  }

  transform(style): any {
    return this.sanitizer.bypassSecurityTrustHtml(style);
  }

}

管道必须在正确的模块中注册才能使用，这里的guide解释了如何构建自定义管道，您可以在此处找到如何在NgModel中注册管道。

然后，当您准备好使用消毒管道时，可以通过以下方式编写html：

<div class="content" [innerHtml]="item.value | safeHtml"></div>

*您在class =“ contetnt”中有错字。

仅此而已，最后我建议您注意html清理用法，此方法可让您呈现您在innerHTML中传递的所有html，如果您呈现的是编写的代码，则可以，但是如果这样做来自未知来源的代码可能是恶意的，您不应允许执行该代码，因此请确保您没有进行清理。

Answer 3

是的，您可以使用[innerHtml]呈现它们在html上呈现。

change your html to :
<div class="contetnt" [innerHtml]="item.value"></div>

如何将数据作为dom标签放入HTML

3 个答案: