如何在模板上将包含 html 内容的打字稿字符串变量显示为元素，而不是字符串？

Question

我有一个角度应用程序，我在组件打字稿中有以下内容：

field: string;
  constructor() { 
    this.field = "Hello, I am <b>happy</b><br><br><input type='text' value='hello' />"
  }

在我的组件 html 模板中，我有以下内容：

<div [innerHTML]="field"></div>

我期待一个输出：

Hello, I am happy(happy in bold)

[Text input field here]

相反，整个输入标签被省略。知道如何将这样的 html 内容渲染到角度模板上吗？

Answer 1

在注入之前，您必须首先信任 HTML。为此，您必须使用DomSanitizer 。h3 或 p 或 div 元素被认为是安全的。输入元素不是。

您可以创建一个管道并在需要的地方使用它。

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
    name: 'sanitizeHtml'
})
export class SanitizeHtml implements PipeTransform  {

   constructor(private _sanitizer: DomSanitizer){}  

   transform(v: string) : SafeHtml {
      return this._sanitizer.bypassSecurityTrustHtml(v); 
   } 
} 

现在，在 html 中，您可以通过以下方式调用管道：

<div [innerHTML]="field | sanitizeHtml"></div>