Angular 4 输出完整 HTML HTML 中的语法代码作为原始文本

Question

我搜索了可能的答案并且 none 有效。所有 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>

我的component.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() {
  }
}

现在我可怜的输出：

Answer 1

与 [innerHTML] 的绑定将解释 HTML。如果你想显示 HTML 代码，你可以使用 [innerText] 代替，或者像@Vega 指出的那样简单地使用字符串插值。这将正确地转义 HTML。

<div>{{ code1 }}</div>

// or

<div [innerText]="code1"></div>

绑定到 [innerText] 将保留换行符。

Answer 2

innerHTML 如果你想实际显示 HTML 作为文档的一部分插入 DOM。

您需要正常的 {{ code1 }} 语法，它会对变量进行编码以供显示。

添加 code 和 pre 将按您想要的方式设置样式（或者您可以通过 CSS 设置 css 的容器有 white-space:pre)

<div><code><pre>{{code1}}</pre></code></div>

示例 https://plnkr.co/edit/cVnQZeWnqJCYTBmndmB6?p=preview

Angular 4 输出完整 HTML HTML 中的语法代码作为原始文本

Angular 4 Output Complete HTML Syntax code in HTML as raw text

html

css

innerhtml

pre

angular