angular管道讲解 及 实例两三枚

在高大上的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模块

https://excess-xss.com/

https://segmentfault.com/a/1190000008809095  Angular
2 DomSanitizer 

感谢各位大神的分享