Angular2踩坑之自定义Pipe管道
来源:互联网 发布:药品数据查询 编辑:程序博客网 时间:2024/06/07 06:14
从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等),
假如我们用纯管道和非纯管道来处理一个日期类型的时间和字符串类型的时间,那么当我们在一定的时候修改以后,字符串的会应用变化,而日期类型不会,因为日期类型引用的还是原来的内存地址,并没有发生变化,而修改字符串就会导致引用新的内存地址。
0 0
- Angular2踩坑之自定义Pipe管道
- Angular2 使用管道Pipe以及自定义管道格式数据
- angular2--pipe管道使用
- Angular2-管道Pipe
- Angular2 管道 pipe
- 如何自定义Angular2 管道
- Angular2 中管道@Pipe的简单用法
- 管道编程之pipe
- angular2.0如何自定义管道?
- ionic2 angular2自定义pipe ,orderby实现排序
- 《Angular2入门系列基础》——pipe管道数据类型
- Angular2之管道学习笔记
- linux之无名管道pipe
- Java nio 之 管道pipe
- 管道pipe
- 管道 pipe
- 管道(pipe)
- 管道-pipe
- linux中fork
- CentOS7安装nginx+php+mysql/mariadb
- jdk1.8 新特性之 lambda表达式
- js调用函数时加括号与不加括号的区别
- request的请求参数获取方式
- Angular2踩坑之自定义Pipe管道
- 字符串模板
- 如何获得当前系统时间
- 1.Guava------------Cache使用方法
- 南阳OJ 题目24:素数距离问题
- windows下安装Linux(Ubuntu)系统
- 需要了解的基本概念——特征、训练集、样例等
- 模板的分离编译
- Ubuntu下安装tensorFlow遇到的问题和解决方案