Angular2 innerHtml绑定删除样式属性

这个问题在这里已经有了答案：

在RC.1中，某些样式不能使用绑定语法添加1个答案

---

你可以利用DomSanitized来避免它。 最简单的方法是创建自定义管道，如：

import { DomSanitizer } from '@angular/platform-browser'

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

所以你可以使用它：

<div [innerHtml]="html | safeHtml"></div>

Plunker例子

---

通过完成所需的进口，我改进了yurzui的例子：

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

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

我还必须在我的app.module.ts文件中添加该类

import ...
import {SafeHtmlPipe} from "./pipes/safehtml.pipe";
@NgModule({
    declarations: [
        AppComponent,
        ...,
        SafeHtmlPipe  <--
    ],
    imports: [...],
    providers: [...],
    bootstrap: [AppComponent]
})
export class AppModule {
}

---

Angular 2旨在提供更多的声明性方法，因此直接操纵HTML经常令人沮丧。

我相信（几乎）所有的HTML操作都会被修补以通过角度的DOM清理进行过滤。 正如你可以想象的， style属性并没有为span元素列出白名单，实际上，span当前没有允许的属性。

链接地址: http://www.djcxy.com/p/22877.html

上一篇: Angular2 innerHtml binding remove style attribute

下一篇: Difference between declarative and imperative in React.js?