HTML 代码不呈现，只是显示为纯文本答案

【问题标题】：HTML code is not rendering, just being displayed as plaintextHTML 代码不呈现，只是显示为纯文本
【发布时间】：2018-01-06 09:29:46
【问题描述】：

我有一些 HTML，但由于某种原因它显示为纯文本并且没有呈现。

这就是它的样子：

HTML 是这样的：

<div>
  <mat-card>
    <button mat-raised-button>Copy Code to Clipboard</button>
    <mat-card-title>Card with title and footer</mat-card-title>
    <mat-card-subtitle>Subtitle</mat-card-subtitle>
    <mat-card-content>
      <code>{{muchoCodo}}</code>
    </mat-card-content>
    <mat-card-actions>
      <button mat-button>LIKE</button>
      <button mat-button>SHARE</button>
    </mat-card-actions>
    <mat-card-footer>
      Card Footer
    </mat-card-footer>
  </mat-card>

</div>

{{muchoCodo}}

字符串数据被渲染为 muchoCodo 变量。这是我的 Angular 代码：

import {Component, OnInit} from '@angular/core';
declare var Prism;

import 'prismjs';
import 'prismjs/themes/prism-okaidia.css'
import 'prismjs/components/prism-handlebars.min.js'
import 'prismjs/components/prism-lua.min.js'

@Component({
  selector: 'app-generated-code',
  templateUrl: './generated-code.component.html',
  styleUrls: ['./generated-code.component.scss'],
  styles: [`
    mat-card { margin:2em; }
  `]
})
export class GeneratedCodeComponent implements OnInit {

  muchoCodo: string;

  constructor() {

    this.muchoCodo = Prism.highlight(`

    import suman = require('suman');
    const {Test} = suman.init(module);

    Test.create((b, it, before) => {

      it('bahru', t => {

      });

    });


    `, Prism.languages.javascript);

  }

  ngOnInit() {
  }

}

有人知道如何让字符串呈现为 HTML 吗？

【问题讨论】：

如果改成this.muchoCodo = 'testing';呢？
Angular2 parse string to html 的完全相同的副本
你需要解析html因为使用[innerHTML]='yourValueHere'会解决问题

标签： javascript html angular-material2 angular5 prismjs

【解决方案1】：

为了将文本呈现为 HTML，您必须绑定到所需容器元素的 innerHTML 属性。

<mat-card-content>
  <code [innerHTML]="muchoCodo"></code>
</mat-card-content>

请记住，这是一个潜在的安全问题，您应该信任要在页面上呈现的 HTML 内容。

【讨论】：