时间戳

首页 > 解决方案 > 在 Angular 页面中显示 Angular 代码和 HTML（未解析）

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

问题描述

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

我试过 in <code>， in<pre>甚至这个： &lt;div class="name">&#123;&#123; name &#125;&#125; &lt;/div>

但即便如此，它也会尝试绑定到“名称”。

我不想通过任何绑定来做到这一点，我只想在组件 HTML 页面中键入 HTML。

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

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

标签： angular

解决方案

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

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

然后在html中使用

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

在 XHTML 中你可以使用 CDATA

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

推荐阅读