在Angular页面中显示Angular代码和HTML（未解析）

Question

我想在我的角度页面中显示一些示例Angular代码和HTML，但是无论我做什么，Angular都会尝试解析它。

我已经在<code>，<pre>中尝试过，甚至还可以： <div class="name">{{ name }} </div>

但即使那样，它也会尝试绑定到“名称”。

我不想通过任何绑定来完成它，我只想在组件HTML页面中输入HTML。

也许是一个更好的示例：当我将文本粘贴到HTML中时，仍然得到一个input元素，我只想显示HTML（从输入到box.value）。

<pre><code><input #box (keyup.enter)="onEnter(box.value)"></code></pre>

Answer 1

尝试一下：

<pre>
  <code [innerHTML]="someCode"></code>
</pre>

组件：

export class SomeComponent {
  someCode = 'export model = new Model({
     a:function(){}
     b:4
  })'
}

更新为正确的html标签

<pre>
  <code>{{someCode}}</code>
</pre>

<pre>
  <code>{{someOtherCode}}</code>
</pre>

组件

export class SomeComponent  {
  someCode = 'export model = new Model({a:function(){}b:4})'
  someOtherCode = '<div>some html</div>'
}

Answer 2

您可以在组件文件中创建一个变量

public htmlSnippt = `<input #box (keyup.enter)="onEnter(box.value)">`;

然后在html中使用它

<pre>
   {{htmlSnippt}}
</pre>

在XHTML中，您可以使用CDATA

<![CDATA[<input #box (keyup.enter)="onEnter(box.value)">]]>