angular使用[innerHTML]时样式不生效

一、问题描述

使用[innerHTML]向angular的模板中添加模板时，被添加模板中的css样式不生效。

二、详细介绍

【1】需要根据数据模型动态创建表格的表头（部分代码如下）：

//模板
.../ 

.../

//表示表格表头的数据模型
this.columns=[{
      key:"name",
      width:"30%",
      isEdit:true,
      title:this.translate.instant('project.title'),
      render:(val,key,i,row)=>{
        return `${val}自定义`;
      }
    },{
      key:"operation",
      title:this.translate.instant('project.operation'),
      render:(val,key,i,row)=>{
        let deleteStr = this.translate.instant('public.delete');
        let pubStr = this.translate.instant('public.publish');
        //此时“width:120px”未生效
        let resDom = `

                  
${deleteStr}
                  
${pubStr}
                
`;
        return resDom
      }
   }];

【2】通过控制台确认向td中插入的table模板中“width:120px“未生效；

三、解决思路

原因：由于Angular框架有自己的“安全过滤器”，会自动过滤掉通过[innerHTML]插入的html中的样式，所以样式未生效；

方案：使用DomSanitizer中的bypassSecurityTrustHtml

四、实施

【1】代码：

.../
//引入DomSanitizer 
import { DomSanitizer } from '@angular/platform-browser';
//在constructor中声明
 constructor(public translate :TranslateService,private translateHtml:DomSanitizer) {}

//在[innerHTML]的内容处调用
{
      key:"operation",
      title:this.translate.instant('project.operation'),
      render:(val,key,i,row)=>{
        let deleteStr = this.translate.instant('public.delete');
        let pubStr = this.translate.instant('public.publish');
        let resDom = `

                  
${deleteStr}
                  
${pubStr}
                
`;
        return this.translateHtml.bypassSecurityTrustHtml(resDom);
}
.../

【2】结果：