如何從innerHTML的

Question

applay CSS的.class我有管：

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ 
    name: 'spaning', 
    pure: false 
}) 
export class SpanPipe implements PipeTransform 
{ 
transform(value: string): string 
    { 
     return "<span class='mark'>xxx</div>"+value; 
    } 
} 

而且使用這樣的：

<div [innerHTML]="movie.title| spaning"></div> 

如何風格.mark類在CSS？我想讓xxx變紅。我對解決方法不感興趣，如上所述，必須將類添加到管道中。

答案是某種程度上與 Angular 2 - innerHTML styling有關，但我無法自己找到解決方案。

---

，我用這個管道如果我只是添加樣式到我的組件：

.mark{ 
    color: red; 
} 

我得到：

「警告：清理HTML剝離某些內容（見http://g.co/ng/security#xss）。 「

Answer 1

[innerHTML]離不開DOMSanitizer provider使用，否則會引發安全錯誤。您可以使用DOMSanitizer provider在您的自定義管道淨化你的HTML，如下圖所示，

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

@Pipe({ 
    name: 'spaning', 
    pure: false 
}) 
export class SpanPipe implements PipeTransform 
{ 
    constructor(private sanitized: DomSanitizer) {} 

    transform(value: string,color:any): SafeHtml{ 
     return this.sanitized.bypassSecurityTrustHtml("<span class='mark' [ngStyle]="{'color':color}">xxx</div>"+value); 
    } 
} 

HTML

<div [innerHTML]="movie.title| spaning :'red'"></div> 

Answer 2

編輯：

對不起，我的..當你將新的HTML標籤必須使用DOMSanitizer。

我附加plunker展示如何正確地使用它

https://plnkr.co/edit/vBnF9hPSpw46053FQ08G?p=preview

---

您可以使用ngStyle。

Pipes transform功能得到兩個參數： '值' 和 'ARGS'：

export interface PipeTransform { 
    transform(value: any, ...args: any[]): any; 
} 

所以，你可以把油管參數。在這種情況下，我將字符串'red'（女巫可能很容易變成一個變量）並在轉換函數中使用它。

的.html：

<div [innerHTML]="movie.title| spaning :'red'"></div> 

.TS

import { Pipe, PipeTransform } from '@angular/core'; 
import { DomSanitizer } from '@angular/platform-browser'; 
@Pipe({ 
    name: 'spaning', 
    pure: false 
}) 
export class SpanPipe implements PipeTransform 
{ 
transform(value: string,color:any): string 
    { 
     return this.sanitizer.bypassSecurityTrustHtml("<span class='mark' style=color:"+color+">xxx "+value+"</div>"); 
    } 
} 

Answer 3

https://plnkr.co/edit/p0hsn57WT9FfO6E6lRjL?p=info < - plunkr

打開視圖封裝模式爲您的組件'None'表示要在組件中工作的硬編碼類

import { ViewEncapsulation } from '@angular/core' 

在裝飾

selector: 'your-component', 
encapsulation: ViewEncapsulation.None, 

然後消毒你管的HTML

返回它

export class SpanPipe implements PipeTransform 
{ 
    constructor(private sanitized: DomSanitizer) {} 

    transform(value: string): any { 
     return this.sanitized.bypassSecurityTrustHtml("<span class='mark'>xxx</div>"+value); 
    } 
}