angular 2 没有正确解析 html 代码

Question

尝试 HTML 代码以使用内部 HTML 属性查看生成的 HTML，但正如您在下面的示例中看到的那样，它不会. HTML 代码被视为 HTML 标签，并且只是将它们呈现为简单文本而不是创建元素。

@Component({
  selector: 'my-app',
  template: `
  <span [innerHTML]='working'> </span>
   <span [innerHTML]='notWorking'> </span>
  `
})
class AppComponent {  
  working="<h1>hello world angular 6</h1>";
  notWorking='&lt;p&gt; Random Text &lt;/p&gt;'
  constructor() {
    // TODO: Define your Angular component implementation
  }
}

Answer 1

这不会因为一个小问题而起作用：它就是不会。您没有使用 HTML 标签，只使用了它们的“符号”。你的问题到底是什么？使用 < 主要用于在页面上打印出文字符号，而不是作为 HTML 标记。

Answer 2

一个想法是在将 notWorking 字符串注入 innerHTML

之前，使用 domparser（示例）将 notWorking 字符串解析为有效的 html

https://codepen.io/jeremy-denis/pen/rNpZKzO?editors=1111

const { Component, VERSION } = ng.core;

@Component({
  selector: 'my-app',
  template: `
  <span [innerHTML]='working'> </span>
   <span [innerHTML]='notWorking'> </span>
  `
})
class AppComponent {  
  working="<h1>hello world angular 6</h1>";
  notWorking='&lt;p&gt; Random Text &lt;/p&gt;'
  constructor() { 
    this.notWorking =  new DOMParser().parseFromString(this.notWorking, 'text/html').body.innerText;
  }
}

angular 2 没有正确解析 html 代码

angular 2 does not parse correctly html code

html

angular

unicode