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之前，您必须首先信任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内容而不是字符串的typescript字符串变量？

1 个答案: