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如果您想实际显示作为文档一部分插入到 DOM 中的 HTML，则可以使用

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

添加 acode和 apre将会按照您想要的方式对其进行样式设置（或者您可以通过将容器的 css 设置为 has 来通过 CSS 执行相同的操作white-space:pre）

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

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