Angular2之管道学习笔记

管道：可以把一个输出流与另一个输入流连接起来。类似 linux、gulp都有应用。

在Angular2中使用管道非常方便。Angular2中本身提供了一些内置管道。当然也可以自定义管道。

文档链接：https://angular.cn/docs/ts/latest/api/#!?apiFilter=pipe&query=pipe

日常开发中，内置管道也足够用了。常用的有以下几个：

1.字符串、数组截取

官方demo:

@Component({
  selector: 'slice-string-pipe',
  template: `<div>
    <p>{
  {str}}[0:4]: '{
  {str | slice:0:4}}' - output is expected to be 'abcd'</p>　　　　// 截取第0个字符到第4个字符，即前四个字符　
    <p>{
  {str}}[-4]: '{
  {str | slice:-4}}' - output is expected to be 'ghij'</p>　　　　　// 截取字符串最后四个字符
    <p>{
  {str}}[-4:-2]: '{
  {str | slice:-4:-2}}' - output is expected to be 'gh'</p>　　　//从字符串倒数第四个字符开始截取，直至倒数第二个字符
  </div>`
})
export class SlicePipeStringComponent {
  str: string = 'abcdefghij';
}

2.大小写转换

官方demo: