Angular2 初识管道

最近在做的一个模块是关于教师判分的业务，在这个页面需要回显学生的答案，如果不对数据进行处理，那么回显回来的文本就会带有很多html标签，如何更加友好的展现文本？就用到了管道的知识

管道是什么？

Angular管道，就像是一个转换器，将不友好的文本显示变得更加生活化，更加简洁。

html中
在插值表达式中，使用“|”隔开，注意这个符号两边都有一个空格，前边的birthday是我们要显示的值，后边的date就是一个管道，感觉这个表达式也非常的直观，好像是数据真的要进入一个管道似的。date是一个内置的管道，例如这样的管道还有很多，具体可以参看API文档

<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)”装饰器的类。
这个管道类实现了PipeTransform接口的transform方法，该方法接受一个输入值和一些可选参数，并返回转换后的值。
2. 当每个输入值被传给transform方法时，还会带上另一个参数，比如我们这个管道中的exponent(放大指数)。
3. 我们通过@Pipe装饰器告诉Angular：这是一个管道。该装饰器是从Angular的core库中引入的。
4. 这个@Pipe装饰器允许我们定义管道的名字，这个名字会被用在模板表达式中。它必须是一个有效的JavaScript标识符。比如，我们这个管道的名字是safeHTML。

二、在module中引入管道

import { SafeHtmlPipe } from './teacher-judge/keep-html.pipe';

declarations: [SafeHtmlPipe]

三、在html中引入

Angular2 初识管道

猜你在找的Angularjs相关文章