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

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

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

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

// or

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

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