在angular2中使用带有样式的管道返回html标记

Question

我无法获得我设置的元素样式，这是我的管道返回的。

管道代码

@Pipe({
  name: 'tagColour'
})
export class tagColourPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return '<span style="color:red">${value}</span>';
  }

}

page.pug

.state([innerHTML]="item.tagList|tagColour") 

尽管我在返回函数中设置了style属性，但DOM在没有span的情况下呈现为纯style。奇怪的是，上课是有效的。

现在将一笔交易设置为class，然后将ViewEncapsulation设置为None。但由于webpack inline style，ViewEncapsulation不是一个很好的解决方案。

有什么想法吗？

Answer 1

您返回的字符串不会绕过Angular的内置清理。为了返回具有样式的html，请导入以下内容：

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

然后

return this.sanitizer.bypassSecurityTrustHtml(your_html_string);