在高大上的angular中管道是什么,简单明了:将原始值转换为显示值
在我们的项目中,Wuli组长用管道小秀了一把操作,附上组长博客的连接,大神一枚、大家有事没事欢迎去访问
//html中 <p>我的生日是{{birthday | date}}who cares</p> ts中的birthday属性通过 ‘|’ 管道操作符 流入到date管道函数 中返回日期
图中已经声明了HTML中的用法,不过为了醒目,在附上图一幅
先定一个管道,镇一下我的
管道、咳~博客
Angular 2 中默认将所有输入值视为不受信任。
当我们通过 property,attribute,样式,类绑定或插值等方式,将一个值从模板中插入到DOM中时,Angular 2 会自帮我们清除和转义不受信任的值
跨站脚本(Cross-site scripting,通常简称为XSS)
允许恶意用户将代码注入到网页上,其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。了解更多
解决:DomSanitizer 服务
使用如:
constructor(private sanitizer: DomSanitizer) { this.iframe = this.sanitizer.bypassSecurityTrustResourceUrl( "https://segmentfault.com/"); }
手动过滤输入值
项目代码:
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/http://www.jb51.cc/article/p-utsldnht-d.htmlAngular 2 DomSanitizer
感谢各位大神的分享