Angular2踩坑之自定义Pipe管道_angularjs piple()-优快云博客

本文链接：https://blog.youkuaiyun.com/Brave_Coder/article/details/70546632

本文介绍了Angular2中的自定义Pipe，将其比喻为工厂生产线模式，详细讲解了Angular2内置的8种管道和自定义管道的创建过程。重点讨论了如何在主模块中声明自定义管道以及在组件中使用它们。同时，通过对比纯管道和非纯管道处理日期与字符串的区别，阐述了管道的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从15年底接触的AngularJS,当时的感觉是除了难学还是难学，跟后来的React和Vue相比，到现在AngularJS1.x已经没有什么优势了，谷歌去年推出了Angular2（习惯上从2.0版本开始就不再加"JS"），今年3月推出了4.0版本，于是我开始爬坑之旅。

Pipe，管道，如果写过Gulp的朋友肯定非常熟悉，就是工厂的生产线加工模式，我只负责实现某个模块，做完就扔给下一个人，绝不越俎代庖。其实Pipe就是Angularjs中的过滤器，如果你对Angularjs比较熟悉，这些概念都不会陌生。

Angular自定义了8个管道，分别是DatePipe，JsonPipe，UpperCasePipe，LowerCasePipe，DecimalPipe，CurrencyPipe，PercentPipe，SlicePipe，

Pipe后面如果有参数，用":"间隔，不同的Pipe，有不同的格式化方式，我就不多说了，有兴趣的朋友可以参看文档。

自定义管道中，最重要的两点是引入Pipe对象和申明管道名称。

import {Pipe,PipeTransform} from "@angular/core";
@Pipe({
    "name":"upperCase",
    "pure":false
})
export class UpperCasePipe implements PipeTransform{


        transform(val:string):string
        {
            return val.toUpperCase();
        }

}

最关键的是实现PipeTransform中的transform方法，

然后，在主模块中声明它的存在，如下:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { BtnComponent } from "./app.btn";
import { UpperCasePipe } from "./pipe/UpperCase";

@NgModule({
  declarations: [
    AppComponent,
    BtnComponent,
    UpperCasePipe
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
        
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { 

}

在主模块中声明以后，任何地方就都可以使用了，

如果需要使用我们的自定义Pipe，方法如下:

<btn [msg]="'yangxu'|upperCase" (outer)="receive($event)"></btn>

最后提一下，纯管道和非纯管道有一定的区别，由于TypeScript是强类型语言，纯管道要求是基本数据类型（String，Number，Boolean，Array，Function，Object等），

假如我们用纯管道和非纯管道来处理一个日期类型的时间和字符串类型的时间，那么当我们在一定的时候修改以后，字符串的会应用变化，而日期类型不会，因为日期类型引用的还是原来的内存地址，并没有发生变化，而修改字符串就会导致引用新的内存地址。