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

我有一个角度应用程序，我有以下组件类型脚本：

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

---

相反，整个输入标记被省略。您知道如何将这样的html内容以angular格式呈现到模板上吗？

在注入html之前，您必须首先信任它。这样的事情你得用这个。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>

---

谢谢Chandan，它工作得很好，我不得不对您的代码做的另一个更改是添加

SafeHtml

，以便也从平台浏览器导入（不仅仅是

DomSanitarizer

）

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); 
   } 
} 

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