Angular2 初识管道
最近在做的一个模块是关于教师判分的业务,在这个页面需要回显学生的答案,如果不对数据进行处理,那么回显回来的文本就会带有很多html标签,如何更加友好的展现文本?就用到了管道的知识 管道是什么? Angular管道,就像是一个转换器,将不友好的文本显示变得更加生活化,更加简洁。 用法? html中 <p>The hero's birthday is {{ birthday | date }}</p>
我们还可以对管道有更详细的参数设置 <p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p>
还可以将管道连在一起使用: The chained hero's birthday is {{ birthday | date | uppercase}}
灵活的angular同时还支持自定义管道,而在我们项目中也是一种自定义管道的应用,下边就是项目中的实战: 一、建立管道(keep-html.pipe.ts) 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);
}
}
1. 管道是一个带有“管道元数据(pipe metadata)”装饰器的类。 二、在module中引入管道 import { SafeHtmlPipe } from './teacher-judge/keep-html.pipe';
declarations: [SafeHtmlPipe]
三、在html中引入 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |