在高大上的angular中管道是什么，简单明了：将原始值转换为显示值

在我们的项目中，Wuli组长用管道小秀了一把操作，附上组长博客的连接，大神一枚、大家有事没事欢迎去访问

例子一：angular自带的管道函数

//html中	
<p>我的生日是{{birthday | date}}who cares</p>
ts中的birthday属性通过  ‘|’ 管道操作符 流入到date管道函数 中返回日期

例子二、angular自定义管道函数：热身

图中已经声明了HTML中的用法，不过为了醒目，在附上图一幅

再看看大神的代码：

先定一个管道，镇一下我的管道、咳~博客

Angular 2 中默认将所有输入值视为不受信任。

当我们通过 property，attribute，样式，类绑定或插值等方式，将一个值从模板中插入到DOM中时，Angular 2 会自帮我们清除和转义不受信任的值

脚本不会执行，显示为文本，或无法显示控制台报错。

跨站脚本（Cross-site scripting，通常简称为XSS）

Cross-site scripting (XSS) is a code injection attack that allows an attacker to execute malicious JavaScript in another user's browser.一种网站应用程序的安全漏洞攻击，代码注入的一种。

允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。了解更多

解决：DomSanitizer 服务

使用如：

 constructor(private sanitizer: DomSanitizer) {
    this.iframe = this.sanitizer.bypassSecurityTrustResourceUrl(
      "https://segmentfault.com/");       
  }

手动过滤输入值

在angularJS中$sanitize会根绝一个白名单来净化html标签，由此导出sanitize方法差不多的功能

项目代码：

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

@Pipe({ name: 'safeHTML'})
export class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {
  }
  transform(content) {
    return this.sanitizer.bypassSecurityTrustHtml(content);//自定义keepHtml指令，添加信任
  }
}

@Pipe({ name: 'toNumber'})//另一种用法：字符转换 string 转 int
export class StringToNumberStringToNumber implements PipeTransform {
  transform(str:string) {
    return parseInt(str);
  }
}

ts没做啥，不过在angular中ts挺重要的，一带而过吧

html中

 <strong> <p [innerHTML]="question.questionContent | safeHTML"></p></strong>
 <a *ngIf=" (question.stuScore | toNumber) > 0 ; else elseBlock">

这里还用到了ngIf和else，那就再写点吧

正确答案:<a style="color:red">{{question.answer}}</a>   是否答对：
        <a *ngIf=" (question.stuScore | toNumber) > 0 ; else elseBlock">
            <span  class="glyphicon glyphicon-ok"></span>  //easyUI样式 V
        </a>

        <ng-template #elseBlock>
            <span  class="glyphicon glyphicon-remove"></span>//else情况，另一种样式 X
        </ng-template>

小结：

因为要写管道，后半部分算是窃取了我们李鑫超组长的社会主义成果了，不过我们组长脾气那么好，估计也没什么意见；最后写一句：管道：将原始值转换为显示值

附上参考链接：

angular-ngSanitize模块-$sanitize服务详解点击打开链接

html无害化和Sanitize模块

http://www.52php.cn/article/p-utsldnht-d.htmlAngular 2 DomSanitizer

感谢各位大神的分享

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!