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

Question

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

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

您必须先信任 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>

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

How to display a typescript string variable containing html content on the template as an element, and not string?

html-rendering

typescript

angular