在 Angular Material 对话框中编写原始 Html

Question

我只想在 Angular Material 模型中将 html 写为 Raw，当我对 html 进行硬编码（从 web api 返回）时，一切正常。

来自 API 的 HTML

<mat-tab-group class='demo-tab-group'><mat-tab label='Last Read'><div class='demo-tab-content'><mat-card><mat-card-content><strong>Customer No: </strong> <br/><strong>Instrument Type: </strong> Fisher107<br/><strong>Meter Capacity(Un-Corrected): </strong> 0<br/><strong>Modem Status: </strong> Disconnected<br/><strong>Region: </strong> ABC<br/><strong>Instrument S.No: </strong> 16975913<br/><strong>Sanction Load(Corrected): </strong> <br/><strong>Meter Installed At: </strong> Upstream<br/><strong>Zone: </strong> Hyderabad Zone<br/><strong>Meter Type: </strong> Orifice Meter<br/><strong>SMS Code: </strong> <br/><strong>Modem ID: </strong> 1114</mat-card-content></mat-card></div></mat-tab><mat-tab label='Daily Report'><div class='demo-tab-content'><mat-card><mat-card-content></mat-card-content></mat-card></div></mat-tab><mat-tab label='Monthly Report'><div class='demo-tab-content'><mat-card><mat-card-content></mat-card-content></mat-card></div></mat-tab><mat-tab label='Site Parameters'><div class='demo-tab-content'><mat-card><mat-card-content></mat-card-content></mat-card></div></mat-tab><mat-tab label='Graph'><div class='demo-tab-content'><mat-card><mat-card-content></mat-card-content></mat-card></div></mat-tab><mat-tab label='Location'><div class='demo-tab-content'><mat-card><mat-card-content></mat-card-content></mat-card></div></mat-tab></mat-tab-group>

模型对话框

openDialog(): void {
const dialogRef = this.dialog.open(ServiceDialogOverviewExampleDialogComponent,{
  width: '1080px',
  data: { message: this.statusMessage,tabsGroup:this.tabsGroup ,class:this.class,title:this.title}

});

this.tabsGroup 有 html

模板

 template: `   
<mat-card>
  <mat-card-content>
    <mat-card-title>{{data.title}}</mat-card-title>
  </mat-card-content>
   {{data.tabsGroup}}
</mat-card>'

结果（动态 HTML）

硬编码

`<mat-card>
  <mat-card-content>
    <mat-card-title>{{data.title}}</mat-card-title>
  </mat-card-content>
  <mat-tab-group class='demo-tab-group'><mat-tab label='Last Read'><div class='demo-tab-content'><mat-card><mat-card-content><strong>Customer No: </strong> <br/><strong>Instrument Type: </strong> Fisher107 <br/><strong>Meter Capacity(Un-Corrected): </strong> 0 <br/><strong>Modem Status: </strong> Disconnected<br/><strong>Region: </strong> ABC<br/><strong>Instrument S.No: </strong> 16975913 <br/><strong>Sanction Load(Corrected): </strong> <br/><strong>Meter Installed At: </strong> Upstream <br/><strong>Zone: </strong> Hyderabad Zone <br/><strong>Meter Type: </strong> Orifice Meter <br/><strong>SMS Code: </strong> <br/><strong>Modem ID: </strong> 9004</mat-card-content></mat-card></div></mat-tab><mat-tab label='Daily Report'><div class='demo-tab-content'><mat-card><mat-card-content></mat-card-content></mat-card></div></mat-tab><mat-tab label='Monthly Report'><div class='demo-tab-content'><mat-card><mat-card-content></mat-card-content></mat-card></div></mat-tab><mat-tab label='Site Parameters'><div class='demo-tab-content'><mat-card><mat-card-content></mat-card-content></mat-card></div></mat-tab><mat-tab label='Graph'><div class='demo-tab-content'><mat-card><mat-card-content></mat-card-content></mat-card></div></mat-tab><mat-tab label='Location'><div class='demo-tab-content'><mat-card><mat-card-content></mat-card-content></mat-card></div></mat-tab></mat-tab-group>

'

结果

Answer 1

在 Angular 中尝试 DomSanitizer 并使用 bypassSecurityTrustHtml 将 HTML 标记为安全。请注意，您可能需要先将 {{data.title}} 转换为字符串。

即使您使用[innerHTML]，您也需要将它们标记为安全以显示在页面上。

参考： https://angular.io/api/platform-browser/DomSanitizer

Answer 2

在这种情况下，您可以使用 Element 的 innerHTML 属性，如下所示，

<mat-card>
    <mat-card-content>
        <mat-card-title>{{data.title}}</mat-card-title>
    </mat-card-content>
    <div [innerHTML]="tabsGroup"></div>
 </mat-card>

有关如何处理可能不安全的 HTML 内容的详细解答，请参阅this 解答。

Answer 3

如果您正在寻找上述结果。您应该为 Dialog 正确分离 html 文件和组件。

检查 Angular 文档示例。 https://stackblitz.com/angular/gxqmjgmolpy?file=src%2Fapp%2Fdialog-content-example.ts