我有管道：
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>
如何在 css 中设置 .mark 类的样式？我想让那个xxx变红。我对解决方法不感兴趣，必须在管道中添加类，如上所述。
答案在某种程度上与Angular 2 - innerHTML 样式有关，但我自己找不到解决方案。
如果我只是在我使用此管道的组件中添加样式：
.mark{
color: red;
}
我得到：
“警告：清理 HTML 会删除一些内容（请参阅http://g.co/ng/security#xss）。”
[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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句