ionic2的component中使用angular2中的管道使用（特别是number管道，小坑）

原生app有一千种好，但是就是有个小缺点，成本高，刚好这个又是大多数老板和创业团队所不能承受的，所以随着手机硬件的不断进化，webApp迎来爆发期，其中ionic2个人觉得是一个不错的webApp开发框架，特别是你是ng2的爱好者，今天就来谈谈ng2中的小坑以及分享一个探索学习的方法。

例牌：需求是要在ionic组件里面使用管道，例如：使用数字管道或者货币管道

1.看到需求的第一反应肯定是去官网找答案的，这是正常人的思维，但是发现官网只是描述了再view中的使用，例如：{{1234 | number ：‘2.2-2’}}没有找到答案

2.既然官网没有，那么就要思考这个需求是否合理了，是不是这个需求是不是根本没有对应的管道实现？

我的脑细胞飞速跳跃中，想起了ng1，ng1的过滤器可以通过给controller注入$filter服务来在控制器里面使用过滤器，注入在ng2中相当于模块引入，那是不是可以这样

实现呢？在控制器里面import 引入管道模块，然后再得到模块的实例，这个样子就可以使用管道了，于是奔着这个思路，心里肯定了这个是肯定存在的，只是不知道怎么

使用

3.既然确定了要找的东西存在地球，那肯定是可以找到的，这个时候就去谷歌 github 各种途径不择手段的去寻找，功夫总是不负有心人的：找到了

可以在common模块引入管道：

3.1  第一步 引入模块

import { DatePipe,CurrencyPipe  } from '@angular/common';

 第二步 声明提供商（如果整个应用多出使用可以在ngModule里面进行全局声明）

providers:[DatePipe,CurrencyPipe]

第三部 在组件内部声明私有变量，变量的默认值为对应的服务，这样做就相当于告诉了ng2这个组件实例化需要创建两个实例，怎么创建实例根据上面定义的providers定义的提供商去创建

private dataPipe:DatePipe,
private currencyPipe :CurrencyPipe

第四部

这个时候就可以使用管道了

this.dataPipe.transform('timeString','hh:mm') ;

到这里问题就解决玩了。。。。。。。。。。。

真的吗？

于是类推我当然就会使用number管道了是吧，智商为负数都会类推啦

import { NumberPipe  } from '@angular/common';

providers:[NumberPipe]

private numberPipe:NumberPipe ;

this.numberPipe(12345,'2.2-2');

打完收工，准备点击浏览器查看，不过点击前隐约有点不安，因为编辑器显示我有语法错误，但是凭着对自己智商不为负数的类推能力的自信，我最终还是点开了浏览器，

一看，懵逼了，我智商果然还是负数，报错了，大致意思就是NumberPipe不存在，我怀疑了自己智商三秒，然后就开始想问题了

data管道可以DatePipe这个样子引入，currencyPipe管道可以这个样子引入，那么number管道不是可以这个样子引入吗？ NumberPipe,到底哪里错了，为什么，为什么？

百思不得其姐，既然得不到，我就要去一步一步的解开她神秘的外衣，

1.从这里可以知道：

import { DatePipe,CurrencyPipe  } from '@angular/common';

模块是从common模块引入的，于是我去找到common模块，node_modules里面的@angular文件夹下面的common目录下有一个index.js文件夹，可以看到这个模块导出的所有模块：

export * from './src/location';
export { NgLocalization } from './src/localization';
export { CommonModule } from './src/common_module';
export { NgClass, NgFor, NgIf, NgPlural, NgPluralCase, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet } from './src/directives/index';
export { AsyncPipe, DatePipe, I18nPluralPipe, I18nSelectPipe, JsonPipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, SlicePipe, UpperCasePipe } from './src/pipes/index';

显然最后一个导出就是导出管道的，找了几十遍，还真的就差NumberPipe没有，但是找到这两个玩意：

DecimalPipe, PercentPipe, 直接翻译就是小数和分数，感觉好像和number有关，于是再根据导出的路径找到

'./src/pipes/index'这个文件，然后再找到pipes目录，发现问题了，在pipe目录下的index看到一堆这个样子的引入：

import { AsyncPipe } from './async_pipe';
import { DatePipe } from './date_pipe';
import { I18nPluralPipe } from './i18n_plural_pipe';
import { I18nSelectPipe } from './i18n_select_pipe';
import { JsonPipe } from './json_pipe';
import { LowerCasePipe } from './lowercase_pipe';
import { CurrencyPipe, DecimalPipe, PercentPipe } from './number_pipe';
import { SlicePipe } from './slice_pipe';
import { UpperCasePipe } from './uppercase_pipe';
export { AsyncPipe, CurrencyPipe, DatePipe, DecimalPipe, I18nPluralPipe, I18nSelectPipe, JsonPipe, LowerCasePipe, PercentPipe, SlicePipe, UpperCasePipe };

看到重点没，原来number_pipe 管道文件导出了三个管道，CurrencyPipe对应currency，可是number对应的不是number，而是DecimalPipe，这就能解析为什么上面说没有

NumberPipe管道了，不知道出于什么原因，导出的名字居然和管道在view上使用的number不一样，到这里就能明白怎么使用number管道了

import { DecimalPipe} from '@angular/common';

providers:[DecimalPipe]

private decimalPipe:DecimalPipe ;

this.decimalPipe.transform(12345,'2.2-2');

到这里该说的就说完了，如果对你有帮助，在下面给我点个赞啊，给我一点鼓励

ps:上面分享的是遇到问题该如何解决的步骤和个人思路，所以啰啰嗦嗦讲了一大堆，不想看的可以直接挑代码看就好了，这个经验告诉我们，库文件也是人写的，也可能会有一些
意外的事情，当问题打死结时，解开源文件的外衣直视内在是最容易解决问题的办法。