[英]HTML code is not rendering, just being displayed as plaintext
我有一些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嗎?
為了將文本呈現為HTML,您必須綁定到所需容器元素的innerHTML
屬性。
<mat-card-content>
<code [innerHTML]="muchoCodo"></code>
</mat-card-content>
請記住,這是一個潛在的安全問題,您應該信任要在頁面上呈現的HTML內容。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.