Angular 4在HTML中输出完整的HTML语法代码作为原始文本
Posted
技术标签:
【中文标题】Angular 4在HTML中输出完整的HTML语法代码作为原始文本【英文标题】：Angular 4 Output Complete HTML Syntax code in HTML as raw text 【发布时间】：2018-04-05 06:42:29 【问题描述】：我已经搜索了可能的答案，但没有一个有效。所有的 innerhtml 和 PRE 标记示例都适用于代码或文本，但不适用于 HTML。这正是我想要放入变量的内容：
<div [ngStyle]="'display':'flex', 'flex-direction':'column', 'width': '100vw', 'height': '100vh'">
<top-header>
<a class="topHeaderItem" (click)="goToHome()">Home</a>
<a class="topHeaderItem" (click)="gotoTOC()">Contents</a>
</top-header>
这正是我想要在屏幕上显示的内容 - 每个字符，因为它是一个教程示例。
这是我的痛苦。我的 HTML：
1
<div [innerHTML]="code1">
</div>
<hr>
2
<div>
<pre>
<code [innerHTML]="code1"></code>
</pre>
</div>
<hr>
3
<div [innerHTML]=code1>
</div>
我的组件.ts：
import Component from '@angular/core';
@Component(
selector: 'cs-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
)
export class HomeComponent
code1 = `
<div [ngStyle]="'display':'flex', 'flex-direction':'column', 'width': '100vw', 'height': '100vh'">
<top-header>
<a class="topHeaderItem" (click)="goToHome()">Home</a>
<a class="topHeaderItem" (click)="gotoTOC()">Contents</a>
</top-header>
`
constructor()
现在我可怜的输出：
【问题讨论】：
code1 ? 嗨 Vega，这非常接近。就像我要求的那样，所有的 HTML 都是原始文本。不幸的是，这一切都排在一条长线上。为每一行制作 div 并为缩进制作一些样式并不会杀死我。想提出这个作为答案吗？ 【参考方案1】：与[innerHTML] 绑定将解释HTML。如果要显示 HTML 代码，可以改用 [innerText]，或者像 @Vega 指出的那样简单地使用字符串插值。这将正确地转义 HTML。
<div> code1 </div>
// or
<div [innerText]="code1"></div>
绑定到[innerText] 将保留换行符。
【讨论】：
我之前尝试过第二个：在上面显示的输出中查看我的#1。不过，我非常想保留换行符。还有什么想法吗？innerText 将保留这些（将它们转换为<br>）。但是您也可以使用第一种方法并在 HTML/CSS 中处理这个问题，就像 @Gaby 建议的那样（使用 <code><pre> 标记或 <div> 上的 white-space: pre CSS 属性。
亲爱的上帝！为什么这个简单的答案如此难以理解！天哪！【参考方案2】：
innerHTML 是如果您想实际显示作为文档一部分插入到 DOM 中的 HTML。
您需要正常的 code1 语法，该语法将对变量进行编码以供显示。
添加 code 和 pre 将按照您想要的方式设置样式（或者您可以通过 CSS 将容器的 css 设置为 white-space:pre）
<div><code><pre>code1</pre></code></div>
https://plnkr.co/edit/cVnQZeWnqJCYTBmndmB6?p=preview 的示例
【讨论】：
在我尝试过的所有组合中，我没有尝试过这个 LOL...代码中的 pre 然后 ...太棒了。我必须在我的个人维基上写下来。谢谢。 我有<!DOCTYPE html> <html> <head> <title>My First javascript Code</title> </head> <script type="text/javascript"> var myVar = 'global'; function checkscope() var myVar = 'local'; console.log(myVar); </script> <body onload="checkscope();"> <h2>JavaScript Comment</h2> </body> </html> 这不适用于<div><code><pre>code1</pre></code></div>以上是关于Angular 4在HTML中输出完整的HTML语法代码作为原始文本的主要内容，如果未能解决你的问题，请参考以下文章
一旦 HTML 在 Angular 4 中完全动态呈现，如何在 jQuery 中调用函数？