angular4 管道pipe笔记

       今天也是第一次用，自学不易，也遇到一些问题，记录下来整个过程，免得以后少走弯路。

页面需求是这样的，因为接口返回的字符串中含有标签，并且标签内部还有样式。刚开始我用

刚开始我用标签的innerHTML属性去显示

<li (dblclick)="penatrateToThird(childItem)" class="noAgree"

 [title]="childItem.result"  [innerHTML]="childItem.result">

</li>

但是我发现标签内部的样式没了，这可能是innerHTML属性绑定的缺点。

然后，我就开始用自定义的管道了。

首先新建两个管道，一个用来去除html标签，用于title属性绑定，另一个就是和innerHTML类似的作用，但是要显示标签内部样式

1、htmltotext.pipe.ts

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

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

@Pipe({

  name: 'htmltotext'

})

export class HtmlToTextPipe implements PipeTransform {

  constructor (private domSanitizer: DomSanitizer) {

  }

  transform(str:any): any {

    return str.replace(/<[^>]+>/g,"");//去掉所有的html标记

  }

}

2、innerHtml.pipe.ts

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

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

@Pipe({

  name: 'innerHtml'

})

export class innerHtmlPipe implements PipeTransform {

  constructor (private domSanitizer: DomSanitizer) {

  }

  transform(value:any): any {

    return this.domSanitizer.bypassSecurityTrustHtml(value)

  }

}

然后在*.module.ts中的declartions中声明这两个管道

最后在页面中就可以使用自己定义的管道了。

<li (dblclick)="penatrateToThird(childItem)" class="noAgree"

[title]="childItem.result | htmltotext" [innerHTML]="childItem.result | innerHtml">

</li>