如何在网页上使用Angular 2.1.1像stackoverflow生成未呈现的HTML元素？ [英] How to generate unrendered HTML elements on web page with Angular 2.1.1 like stackoverflow?

问题描述

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

我所知道的：

我已经意识到可能有必要将我的所有开标签（即< ）转换为< / code>并将我的所有结束标记（即> ）转换为 & gt ，但是我仍然不确定将某些变量插入到模板中的最佳方式。

例如，我在模板文件中提供了以下内容：

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

我想在浏览器中看到（并且能够复制）： strong>

 < div>这是我的标题< / div> 
< div>< p>这是我的副标题< / p>< / div> 
< div> 
< ul> 
< li> Apple< / li> 
< li>橙色< / li> 
< li>榴莲< / li> 
< / ul> 
< / div> 
  

堆栈溢出通过让您突出显示您希望显示的代码屏幕并单击编辑器中的 {} 按钮。然而，当我尝试在我的Angular2应用中使用< pre> &< code> 标签时，我确实没有得到相同的结果，我看不到像< div> 和< li> 这样的实际HTML元素。

取而代之的是：

  {{myTitle}} 
 {{mySubTitle}} 
 {{item1}} 
 {{item2}} 
 {{item3}} 
  

过去我使用过 handlebarsjs ，并且熟悉该库，但我的印象是使用 Angular2 将消除对 handlebarsjs 的需求。有没有人知道如何完成我在 Angular2 中没有使用 handlebarsjs 所要做的事情？

解决方案

使用< 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> 
  

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

What I am trying to do:

I am attempting to create a web page with Angular2 which shows HTML on the screen in much the same way many websites do such as stackoverflow, css-tricks, and and w3schools (to name a few). I would like to be able to copy the code and paste it somewhere else after its shown on screen.

What I know:

I have come to realize that it will probably be necessary to convert all of my opening tags ( i.e., < ) to &lt and to convert all of my closing tags ( i.e., > ) to &gt, however I am still not sure what the best way to interpolate some variables into the template.

For example, I have this in my template file:

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

What I want to see (and be able to copy) in the browser:

<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>

Stack overflow makes this really easy and nice to accomplish by letting you highlight the code you want to display on screen and clicking the {} button in the editor. However, when I try using the <pre> and <code> tags in my Angular2 app, I do not get the same result, I cannot see the actual HTML elements like <div> and <li>.

Instead what I see is:

{{myTitle}}
{{mySubTitle}}
{{item1}}
{{item2}}
{{item3}}

I have used handlebarsjs in the past and am familiar with that library but I was under the impression that using Angular2 would eliminate the need for handlebarsjs. Does anyone know how to accomplish what I am trying to do in Angular2 without handlebarsjs?

解决方案

Use <pre> or <code> for HTML to become rendered verbatim.

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

You need to escape { and } (for example like shown above)

这篇关于如何在网页上使用Angular 2.1.1像stackoverflow生成未呈现的HTML元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！