Angular4中自定义管道

前言

Angular 是由谷歌开发与维护一个开发跨平台应用程序的框架，同时适用于手机与桌面。 管道的做用是把数据做为输入，而后转换它，给出指望的输出。

7.1 使用管道

如：

import { Component } from '@angular/core';

@Component({
  selector: 'app-hero-birthday',
  template: `<p>{{ birthday }}</p>`
})
export class HeroBirthdayComponent {
  birthday = new Date(1988, 3, 15); 
}

// 不使用管道时，显示：
// Fri Apr 15 1988 00:00:00 GMT+0800 (中国标准时间)
复制代码

使用管道后：

<p>{{ birthday | date }}</p>
// Apr 15, 1988
复制代码

7.2 参数化管道

上面的案例中，使用的是data管道，来进行时间转换，有其默认的转换格式，咱们也能够自定义转换格式，只须要像data管道中传递参数就能够了。

好比咱们想要上面的信息转换为1998/03/15的格式

<p>{{ birthday | date:"yyyy/MM/dd" }}</p>
复制代码

Angular 内置了一些管道，好比 DatePipe，UpperCasePipe，LowerCasePipe等待。 它们全均可以直接用在任何模板中。

要学习更多内置管道的知识，参见API 参考手册，并用“pipe”为关键词对结果进行过滤

7.3 自定义管道

angular4还支持自定义管道，你能够本身定义想要的管道。

近期接到这样一个需求：

要求在多个页面中显示用户的头像图片，但有的用户没有上传头像的话，就须要系统根据用户性别显示默认的男/女头像。

固然这样一个简单的需求不管你是在HTML进行判断仍是在js中判断均可以实现。

当如果有多个页面都须要用到的话，彷佛也是一项比较繁重的任务。

因此你能够选择封装一个共用的方法在每一个页面进行调用或者能够尝试自定义一个管道。

博主工做中使用的是前端框架Angularjs4，项目总体是使用angular-cli进行搭建的，下面介绍的是如何在angularjs中自定义一个管道。

1.肯定需求

多个页面显示用户头像
如果头像图片地址不存在则判断用户性别
根据用户性别显示默认的男女头像
如果性别和头像图片地址都不存在则显示默认的人形头像
复制代码

2.设计管道

1.前期准备

在项目目录src/app/common文件夹下建立一个新文件夹pipe，并在pipe中建立一个comm.pipe.ts文件。

(common文件夹是我存放一些公共组件/方法/管道的文件夹,它是一个功能的模块，其中的全部组件/方法/管道我都会在common文件夹下的shared.module.ts中进行导出)

2.编写comm.pipe.ts

自定义管道须要先引入@angular/core中的Pipe和PipeTransform

//comm.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

const sexList = ['', '男', '女'];
const uHeadImg = ['./assets/images/default_male.png', './assets/images/boy.png', './assets/images/girl.png'];

@Pipe({ name: 'portrait' })
export class Portrait implements PipeTransform {
    transform(value): string {
        let url = "";
        if (value === '男' || value === '女') {
            let idx = sexList.indexOf(value);
            url = uHeadImg[idx];
        } else {
            url = value ? value : uHeadImg[0];
        }
        return url;
    }
}
复制代码

• 定义俩个数组一个为性别，一个为三种图片的存放路径
• 须要使用@Pipe来装饰类
• 实现PipeTransform的transform方法，该方法接受一个输入值和一些可选参数
• 在@Pipe装饰器中指定管道的名字，这个名字就能够在模板中使用。
• transform为PipeTransform中继承而来的方法，它接收0个或多个参数

3.导出自定义管道

在shared.module.ts中导出：

//shared.module.ts

import { NgModule } from '@angular/core';
import { Portrait } from './pipe/comm.pipe';
...

@NgModule({
  imports: [
    ...
  ],
  declarations: [
  	...
    Portrait
  ],
  exports: [
    ...
    Portrait
  ]
})
export class SharedModule {

}

复制代码

4.使用管道

因为管道是在shared.module.ts中导出的，所以要使用它就必须在要使用的模块中导入

如在student这个模块中使用

1.首先在student.module.ts中引用

//student.module.ts

import { NgModule } from '@angular/core';
import { SharedModule } from "./../common/shared.module";
...
import { Students } from "./students"; //students为该模块下的一个页面

@NgModule({
  imports: [
    SharedModule,
    ...
  ],
  declarations: [
    Students
  ],
  providers: [
  ]
})
export class StudentModule { }
复制代码

2.在页面中使用：

//students.component.html

<div class="uHead">
	<span>学员头像：</span>
	<img src="{{studentInfo['uHeadUrl']||studentInfo.sex | portrait}}" title="头像" alt="头像">
</div>
复制代码

• 图片的src是须要用{{}}的方式
• studentInfo['uHeadUrl']||studentInfo.sex就是传递给管道的参数，表示为若是有头像路径则传递头像路径，没有则传递性别。
• | potrait表示使用名为potrait的管道，就是你在comm.pipe.ts中定义的name

5.总结

在angularjs4中使用管道总结为这么几步：

1.定义一个自定义管道的ts并引入@angular/core中的Pipe来编写管道

2.将自定义管道的ts在模块中导出

3.要使用管道的模块中引入管道模块

4.html中使用的话采用如下方式：

{{ info | PipeName }}  // PipeName为你自定义的管道名称
复制代码