Question

我要做的是：

我正在尝试使用Angular2创建一个网页，它在屏幕上以与许多网站相同的方式显示HTML，例如stackoverflow，css-tricks和w3schools（仅举几例）。我希望能够复制代码并将其粘贴到屏幕上显示的其他地方。

我所知道的：

我已经意识到可能有必要将我的所有开始标记（即<）转换为&lt并转换所有结束标记（即{{1} }}}到>，但我仍然不确定将一些变量插入到模板中的最佳方法。

例如，我在模板文件中有这个：

&gt

我希望在浏览器中看到（并能够复制）：

<div>{{myTitle}}</div>
<div><p>{{mySubTitle}}</p></div>
<div>
<ul>
<li>{{item1}}</li>
<li>{{item2}}</li>
<li>{{item3}}</li>
</ul>
</div>

通过让您突出显示要在屏幕上显示的代码并单击编辑器中的<div>This is my title</div> <div><p>This is my subtitle</p></div> <div> <ul> <li>Apple</li> <li>Orange</li> <li>Durian</li> </ul> </div>按钮，堆栈溢出使这非常简单易用。但是，当我尝试在Angular2应用中使用{}和<pre>标记时，我得不到相同的结果，我看不到像<code>和{{1}这样的实际HTML元素}。

而我所看到的是：

<div>

我过去使用过 handlebarsjs 并熟悉该库，但我觉得使用 Angular2 会消除对 handlebarsjs的需求。有没有人知道如何在没有 handlebarsjs 的 Angular2 中完成我想要做的事情？

Answer 1

对于<和>，您可能需要使用&lt和&gt。

对于模板表达式中的大括号，您可能需要使用ngNonBindable指令。

<div ngNonBindable> {{myTitle}} </div>

Answer 2

使用<pre>或<code>来逐字呈现HTML。

<pre ngNonBindable>
  <div>{{'{{'}}myTitle{{'}}'}}</div>
  <div><p>{{'{{'}}mySubTitle{{'{{'}}</p></div>
  <div>
  <ul>
  <li>{{'{{'}}item1{{'{{'}}</li>
  <li>{{'{{'}}item2{{'{{'}}</li>
  <li>{{'{{'}}item3{{'{{'}}</li>
  </ul>
  </div>
</pre>

您需要转义{和}（例如，如上所示）

如何使用Angular 2.1.1在stackoverflow上生成网页上未呈现的HTML元素？

2 个答案: