In this example, we are going to see how to use Pipe as providers inject into component.

We have the pipe:

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
name: 'filesize'
})
export class FileSizePipe implements PipeTransform{
transform(value: number, ext: string = "MB") {
return (value / ( * )).toFixed() + ' ' + ext;
}
}

We want to inject this pipe as provider to the component:

import { Component, OnInit } from '@angular/core';
import {FileSizePipe} from './filesize.pipe'; interface File {
name: string,
size: number | string,
type: string
} @Component({
selector: 'app-root',
template: `
<div>
<div *ngFor="let file of files">
<p>{{ file.name }}</p>
<p>{{ file.size | filesize: 'MB' }}</p>
</div>
<hr>
<div *ngFor="let file of mapped">
<p>{{ file.name }}</p>
<p>{{ file.size }}</p>
</div>
</div>
`,
providers: [
FileSizePipe
]
})
export class AppComponent implements OnInit {
files: File[];
mapped: File[]; constructor(
private fp: FileSizePipe
) {
} ngOnInit() {
this.files = [
{ name: 'logo.svg', size: , type: 'image/svg' },
{ name: 'banner.jpg', size: , type: 'image/jpg' },
{ name: 'background.png', size: , type: 'image/png' }
];
this.mapped = this.files.map((file) => ({
name: file.name,
type: file.type,
size: this.fp.transform(Number(file.size), 'mb')
}));
}
}

As we can see, we use 'providers' keyword in the @Component:

  providers: [
FileSizePipe
]

This enable us to inject pipe into component:

  constructor(
private fp: FileSizePipe
) {
}

Then we just need to call transform method on the pipe:

    this.mapped = this.files.map((file) => ({
name: file.name,
type: file.type,
size: this.fp.transform(Number(file.size), 'mb')
}));

In the html. we don't need to use '|filesize: 'MB'' anymore:

      <div *ngFor="let file of mapped">
<p>{{ file.name }}</p>
<p>{{ file.size }}</p>
</div>

[Angular] Pipes as providers的更多相关文章

  1. [Angular 2] Value Providers & @Inject

    Dependecies aren’t always objects created by classes or factory functions. Sometimes, all we really ...

  2. [Angular 2] BYPASSING PROVIDERS IN ANGULAR 2

    Artical --> BYPASSING PROVIDERS IN ANGULAR 2 Here trying to solve one problem: On the left hand s ...

  3. [Angular] Difference between Providers and ViewProviders

    For example we have a component: class TodoList { private todos: Todo[] = []; add(todo: Todo) {} rem ...

  4. Angular CurrencyPipe货币管道关于人民币符号¥的问题

    做项目(Angular项目)时经常需要处理金额的显示,需要在金额前面加上¥,但又不想用简单在前面加"¥"这么不优雅的方式,于是想到了CurrencyPipe.毕竟,Currency ...

  5. @angular/cli项目构建--interceptor

    JWTInterceptor import {Injectable} from '@angular/core'; import {HttpEvent, HttpHandler, HttpInterce ...

  6. Angular复习笔记6-依赖注入

    Angular复习笔记6-依赖注入 依赖注入(DependencyInjection)是Angular实现重要功能的一种设计模式.一个大型应用的开发通常会涉及很多组件和服务,这些组件和服务之间有着错综 ...

  7. Angular 项目打包之后,部署到springboot项目中,刷新访问404解决方法

    解决方法1: app.module.ts文件添加两行代码: import { LocationStrategy, HashLocationStrategy } from '@angular/commo ...

  8. Angular2 组件

    1. 组件说明 Angular2 组件是构成Angular2应用程序的核心部分,Angualr2应用程序本质上来说就是一个组件树,Angular2组件一般由模块,注解,元数据以及组件类组成,实现组件类 ...

  9. Ionic2文档整理

    来自:Rainey's Blog 原文地址:http://rainey.space/2016/04/06/Ionic2_Chinese_Document/ Github:https://github. ...

随机推荐

  1. 邮件协议与port

          电子邮箱的协议有SMTP.POP2.POP3.IMAP4等.都隶属于TCP/IP协议簇,默认状态下.分别通过TCPport25.110和143建立连接.针对不同的用途和功能,我们在邮件se ...

  2. Struts1 的html标签的具体解说与使用

    <html:form> 标签 <html:form>用来创建表单.<html:form>必须包括一个action属性,否则JSP会抛出一个异常. 经常使用的属性有下 ...

  3. Android怎样实现毛玻璃效果之Android高级模糊技术

    自从iOS系统引入了Blur效果,也就是所谓的毛玻璃.模糊化效果.磨砂效果.各大系统就開始竞相模仿,这是如何的一个效果呢,我们先来看一下,如以下的图片: 效果我们知道了,怎样在Android中实现呢. ...

  4. TextView-属性大全(设置超链接颜色)

    今天想要修改一个textview下的超链接的颜色值,自己当时在网上搜了一下,结果看到的全是怎么给一个textview中的部分内容设置颜色.下划线等.当时就以为在textview属性里面可能不存在设定超 ...

  5. matlab 局部特征检测与提取(问题与特征)

    物体识别:SIFT 特征: 人脸识别:LBP 特征: 行人检测:HOG 特征: 0. 常见手工设计的低级别特征 manually designed low-level features 语音:高斯混合 ...

  6. Spark SQL概念学习系列之Spark SQL基本原理

    Spark SQL基本原理 1.Spark SQL模块划分 2.Spark SQL架构--catalyst设计图 3.Spark SQL运行架构 4.Hive兼容性 1.Spark SQL模块划分 S ...

  7. WebService学习总结(5)——WebService常见开发框架比较

    在SOA领域,我们认为Web Service是SOA体系的构建单元(building block).对于服务开发人员来说,AXIS和CXF一定都不会陌生.这两个产品都是Apache孵化器下面的Web ...

  8. mybatis中整合ehcache缓存框架的使用

    mybatis整合ehcache缓存框架的使用 mybaits的二级缓存是mapper范围级别,除了在SqlMapConfig.xml设置二级缓存的总开关,还要在具体的mapper.xml中开启二级缓 ...

  9. ARCGIS刷新的故事

    转自原文章ARCGIS部分刷新 1, IActiveView.Refresh 全局刷新,即重绘地图中的所有内容,是效率最低的一种刷新方法.当数据量大时非常耗时.所以除非绝对必要,一般推荐使用IActi ...

  10. Redis源代码分析(八)--- t_hash哈希转换

    在上次的zipmap分析完之后,事实上关于redis源码结构体部分的内容事实上已经所有结束了.由于以下还有几个和结构体相关的操作类,就页把他们归并到struct包下了.这类的文件有:t_hash.c, ...