Angular 4以HTML格式输出完整的HTML语法代码为原始文本 [英] Angular 4 Output Complete HTML Syntax code in HTML as raw text

问题描述

我已经搜寻了可能的答案，但没有一个起作用.所有innerHTML和PRE标记示例都适用于代码或文本，但不适用于HTML.这正是我要放入变量中的内容:

I have scoured the possible answers and none of them work. All the innerHTML and PRE tag examples are fine with code or text, but NOT with HTML. Here is EXACTLY what I want to put into a variable:

<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>

而这正是我想在屏幕上显示的内容-每个字符都是一个教程示例.

AND THAT is precisely what I want to show up on the screen - every single character because it is a tutorial example.

这是我的痛苦.我的HTML:

Here's my agony. My HTML:

1
<div [innerHTML]="code1">
</div>
<hr>
2
<div>
<pre>
  <code [innerHTML]="code1"></code>
</pre>
</div>
<hr>
3
<div [innerHTML]=code1>
</div>

我的component.ts:

My 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() {
  }
}

现在我可悲的输出:

推荐答案

innerHTML是要实际显示作为文档一部分插入DOM的HTML.

The innerHTML is if you want to actually show HTML that is inserted in the DOM as part of the document.

您需要普通的{{ code1 }}语法，该语法将对要显示的变量进行编码.

You want the normal {{ code1 }} syntax which will encode the variable for displaying.

添加code和pre可以为其设置所需的样式(或通过将容器的css设置为具有white-space:pre 的方式通过CSS进行此操作)/p>

Adding a code and a pre will style it the way you want (or you can do the same through CSS by setting the css of the container to have white-space:pre)

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

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

这篇关于Angular 4以HTML格式输出完整的HTML语法代码为原始文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！