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

时间:2017-08-16 04:06:09

标签: angular angular-pipe

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

管道代码

@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不是一个很好的解决方案。

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

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

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

然后

return this.sanitizer.bypassSecurityTrustHtml(your_html_string);