logo标签列表

在HTML中以纯文本形式输出完整的HTML语法代码

htmlcssangularinnerhtmlpre
5

我已经仔细查看了所有可能的答案，但都不起作用。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() {
  }
}

下面是我可悲的输出：

输入图像描述

<div>{{code1}}</div> ? - Vega
1
{btsdaf} - Yogi Bear
2个回答
3

使用[innerHTML]绑定将解释HTML代码。如果您想显示HTML代码，可以改用[innerText]或使用@Vega提到的字符串插值。这样可以正确转义HTML代码。

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

// or

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

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

{btsdaf} - Yogi Bear
{btsdaf} - Martin Adámek
亲爱的上帝！为什么这个简单的答案这么难找到呢！天啊！ - Pytth
2

innerHTML 是用于在文档中插入 HTML 并显示在 DOM 中的内容。

如果要显示变量，请使用普通的 {{ code1 }} 语法，该语法将对变量进行编码以供显示。

添加 code 和 pre 可以使其样式符合您的要求（或者您可以通过将容器的 CSS 设置为 white-space:pre 来实现相同的效果）。

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

请查看https://plnkr.co/edit/cVnQZeWnqJCYTBmndmB6?p=preview的示例。

{btsdaf} - Yogi Bear
我有以下代码：<!DOCTYPE html> <html> <head> <title>我的第一段JavaScript代码</title> </head> <script type="text/javascript"> var myVar = 'global'; function checkscope() { var myVar = 'local'; console.log(myVar); } </script> <body onload="checkscope();"> <h2>JavaScript注释</h2> </body> </html>但它与<div><code><pre>{{code1}}</pre></code></div>不兼容。 - Sanjay Tiwari
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接