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

Question

我已经搜索了可能的答案，但没有一个有效。所有的 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() {
  }
}

现在我可怜的输出：

Answer 1

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

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

// or

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

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

Answer 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 的示例