角4中的InnerHTML未加载

Question

我在做“角/芯”4.4.6，

这是我的组件html

<div class="contact" [innerHTML]="template">

这是我的组件ts代码

this.template = '<div> hello world </div>';
console.log(self.template );

当组件ts代码运行时，控制台可以打印hello world，但是这个html自动加载到组件中，html页面仍然是空的。

这是为什么，以及如何解决？

Answer 1

更新您的代码并尝试，

self.template = '<div> hello world </div>';

如果它不起作用或您仍在受苦，请尝试以下jQuery代码(在Angular2中这不是推荐的方法)

：<div class="contact" id="template">

TS：$('#template').html('<div> hello world </div>');

Answer 2

在您的代码片段周围提供更多的上下文将很有帮助。比如它是如何在类中声明的，初始化在哪里进行的，它是否作为类的公共成员公开是相关的。

然而，我猜角并不相信HTML是“安全的”。

为了满足我的需要，我必须创建一个管道来处理绑定到模板的HTML标记：

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

/**
 * See link for more detail: https://stackoverflow.com/questions/39628007/angular2-innerhtml-binding-remove-style-attribute
 */
@Pipe({
  name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {

  constructor(private sanitized: DomSanitizer) {}

  transform(value: string, args?: any): SafeHtml {
    if(value) {
      return this.sanitized.bypassSecurityTrustHtml(value);
    } else {
      return 'Undefined HTML';
    }
  }

}

查看Dom消毒剂的角度文档，或者按照链接到另一个文档，因此在代码注释中发布更多信息。