angualr2中的管道

第一步:我们先创建一个管道文件  以xxx.pipe.ts这种格式结尾

import { Pipe, PipeTransform } from '@angular/core'; //我们需要导入的配置


@Pipe({  
  name: 'test'  //标明为管道的名字
})
export class Test implements PipeTransform{  //  PipeTransform 实现某个接口
  transform(value, args?) {  //方法 这是规定好的 不需要修改
    return value+'TEST'  //返回值
  }
}


第二步:我们需要在app.module.ts 这个文件中将这个 管道 注入进来 方便 页面的注入

import {xxx } from "../pages/xxx/xxx/xxx.pipe";

@NgModule({
  declarations: [

xxx //并在这里声明

]})

entryComponents: [xxx]//这里也要声明

第三步:我们需要在对应的过滤ts文件 中注入  import { Component,Pipe } from '@angular/core';

最后:我们需要在HTML页面中 添加这个管道  {{item.createTm | friendsCircleFilter}}  前面是 数据  后者是 用管道对前者过滤 friendsCircleFilter之前定义的管道名字

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值