在角材料对话框中写入原始HTML

Question

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

HTML FROM API

<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

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

结果（动态HTML）

HARDCODED

`<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

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

<div [innerHTML]=“tabsGroup”></div>