Javascript MatDialog中的Angular 5动态模板

在我的组件中，我打开一个MatDialog并将数据传递给它。在我的对象中，data.obj在this.data.obj.html下存储html代码

在electron中，我将使用webview来显示html站点

如何在angular 5中的MatDialog中以正确的方式显示html代码？可以动态创建模板，或者有更平滑的方法吗

@Component({
  selector: 'dialog-popup',
  template:`
  <h1 mat-dialog-title>Content-HTML</h1>
  <mat-dialog-content>
  {{this.data.obj.html}}
  </mat-dialog-content>
  <mat-dialog-actions>
    <button mat-button>Complain</button>
    <button mat-button (click)=onNoClick()>Cancel</button>
  </mat-dialog-actions>
`
})
export class DialogOverview {

  constructor(
    public dialogRef: MatDialogRef<DialogOverview>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

    ngOnInit() {
    console.log(this.data.obj.html);
    }
  onNoClick(): void {

    this.dialogRef.close();
  }

}

@组件({
选择器：“对话框弹出窗口”，
模板：`
内容HTML
{{this.data.obj.html}
抱怨
取消
`
})
导出类对话框概述{
建造师(
公共dialogRef:MatDialogRef，
@注入（MAT_DIALOG_DATA）公共数据：any{}
恩戈尼尼特（）{
log（this.data.obj.html）；
}
onNoClick（）：void{
this.dialogRef.close（）；
}
}

您可以将其绑定到html元素的[innerHtml]属性

<mat-dialog-content>
    <div [innerHtml]="data.obj.html | keepHtml"></div>
</mat-dialog-content>

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

@Pipe({ name: 'keepHtml', pure: false })
export class KeepHtmlPipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) { }

    transform(content) {
        return this.sanitizer.bypassSecurityTrustHtml(content);
    }
}