angular - 如何在模板上显示包含 html 内容的 typescript 字符串变量作为元素，而不是字符串？

Question

我有一个 Angular 应用程序，我在组件 typescript 中有以下内容:

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 内容以 Angular 呈现到模板上吗？

Answer 1

在注入(inject)之前，您必须首先信任 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>