Angular2 innerHtml 删除样式

Posted

技术标签:

【中文标题】Angular2 innerHtml 删除样式【英文标题】:Angular2 innerHtml removes styling 【发布时间】:2017-02-09 05:06:47 【问题描述】:

我正在使用 innerhtml 并在我的 cms 中设置 html 响应似乎还可以,如果我像这样打印它: poi.content

它给了我正确的内容: `

<table border="0" cellpadding="5" cellspacing="0">
   <tbody>
     <tr>
       <td style="vertical-align: top;">Tes11t</td>
       <td style="width: 2px;">&nbsp;</td>
       <td style="width: 1px;"><img  src="http://beeksebergen.dev/app_dev.php/media/cache/resolve/full_size/midgetgolf-sport-faciliteiten-vakantiepark-2.jpg" style="height: 67px; width: 100px;" /></td>
      </tr>
    </tbody>
 </table>

`

但是当我使用[innerHtml]="poi.content" 时,它会返回这个 html:

<table border="0" cellpadding="5" cellspacing="0">
    <tbody>
        <tr>
            <td>Tes11t</td>
            <td>&nbsp;</td>
            <td><img  src="http://beeksebergen.dev/app_dev.php/media/cache/resolve/full_size/midgetgolf-sport-faciliteiten-vakantiepark-2.jpg"></td>
        </tr>
    </tbody>
</table>

有人知道为什么当我使用[innerHtml] 时它会剥夺我的样式

【问题讨论】:

这看起来很相似:***.com/questions/36265026/… 【参考方案1】:

Angular2 清理动态添加的 HTML、样式、...

@Pipe(name: 'safeHtml')
export class Safe 
  constructor(private sanitizer:DomSanitizer)

  transform(html) 
    return this.sanitizer.bypassSecurityTrustHtml(html);
  

[innerHtml]="poi.content | safeHtml"

https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html In RC.1 some styles can't be added using binding syntax 了解更多详情。

【讨论】:

未处理的承诺拒绝:EXCEPTION: Can't resolve all parameters for Safe: (?). platform-browser.umd.js:2347 EXCEPTION: Can't resolve all parameters for Safe: (?).BrowserDomAdapter.logError 也找不到名称 DomSanitizer 我必须导入 import DomSanitizer 吗? 是的,您必须导入您使用的每种类型。您还需要在NgModule 中将Safe 添加到declarations。如果DomSanitizer 不起作用,请尝试将其更改为Sanitizer。我已经看到它提到这可以代替。 喜欢这个 import DomSanitizationService from '@angular/platform-b​​rowser';?还是 DomSanitizer?因为 DomSanitizer 无法识别 谢谢它正在工作我必须更新我的角度,因为在我的情况下我使用DomSanitizationService

以上是关于Angular2 innerHtml 删除样式的主要内容,如果未能解决你的问题,请参考以下文章

Ng2 innerHTML 如何允许样式属性? [复制]

使用 Angular 2+ [innerHTML] 添加包含样式属性的 html

Angular 2 innerHTML 忽略表单标签

Angular2 [innerHtml] angular2 标签不起作用

带有变量 angular2 的 innerHTML

ngModel innerHTML 在 p 标签中有效,但在输入标签 angular2 中无效