Angular2 innerHtml binding刪除樣式屬性

我的問題是，當我使用innererHtml binding-angular2刪除所有樣式屬性。這對我很重要，因爲在我的任務中 - html是在服務器端用所有樣式生成的。例子：Angular2 innerHtml binding刪除樣式屬性

@Component({ 
    selector: 'my-app', 
    template: ` 
    <input type="text" [(ngModel)]="html"> 
    <div [innerHtml]="html"> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    html: string; 
    constructor() { 
    this.name = 'Angular2' 
    this.html = "<span style=\"color:red;\">1234</span>"; 
    } 
}

但在DOM我只看到1234，本文不紅。

http://plnkr.co/edit/UQJOFMKl9OwMRIJ38U8D?p=preview

謝謝！

來源

2016-09-21 user2921406

Angular 2旨在爲更多declarative approach，所以直接操縱HTML is often discouraged。

我相信（幾乎）所有的HTML操作都會被修補以通過角度的DOM清理過濾。正如你可以想象的style屬性不是白名單中的span元素，實際上，span has no allowed attributes此刻。

來源

2016-09-22 03:51:38 cvsguimaraes

您可以利用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 Example

來源

2016-09-22 04:51:38 yurzui

非常酷的決議！非常感謝你！ – user2921406

謝謝！真的很有用的答案。 – codelovesme

請注意，您可以使用以下命令向Ionic添加新管道：'離子管道MyPipe' – makinbacon

我填寫了一下提高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 { 
}

來源

2016-12-15 11:44:41 mvermand

注意，sanitizer有的一些方法如信任內容

return this.sanitizer.bypassSecurityTrustStyle(value); 
return this.sanitizer.bypassSecurityTrustHtml(value); 
return this.sanitizer.bypassSecurityTrustXxx(value); // - see docs [1]

通過https://stackoverflow.com/a/41089093/142714

所以，bypassSecurityTrustStyle也可能是你想要的這裏，因爲這將顯示你的HTML內容（value）內內嵌樣式。

[1] docs：https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html

來源

2017-02-06 09:12:42

Angular2 innerHtml binding刪除樣式屬性

回答

相關問題