angular2+ 自定义pipe管道实例--定义全局管道及使用

首先到项目目录下ng g pipe pipe/myslice 就会在app目录下生成一个pipe文件夹文件夹下有myslice.pipe.ts文件，如果没有也可以自己手动新建

然后需要再app.module.ts 也就是在模块文件中设置

// 首先导入
import { MyslicePipe } from '../../pipe/myslice.pipe'// 然后在相应的declarations中声明
 declarations: [MyslicePipe]

好了就可以安心的在myslice.pipe.ts中自定义需要的管道了

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'myslice'})export class MyslicePipe implements PipeTransform {transform(value: string): string {if(!value) return value;return decodeURI(value.split('img/')[1]); // 这里的value是传入的值，返回你想要的结果表达式}constructor() {    }
}

使用和其他管道使用方法一样

在任意的html文件中都可使用

// detailPage.attachment是个字符串
<span>{{detailPage.attachment | myslice}}</span>

转载于:https://www.cnblogs.com/leiting/p/9288491.html

angular2+ 自定义pipe管道实例--定义全局管道及使用相关推荐

python管道_python 多进程之管道实例（模板）
python 多进程之管道实例(模板) #2012-02-27磁针石 #承接软件自动化实施与培训验证码破解软件破解脚本开发测试和python培训等 #gtalk:ouyangchongwu#gmail ...
Linux 3.进程间通信（IPC）（pipe 无名管道、mkfifo 有名管道、ftok、msgget、msgrcv、msgsnd、msgctl 消息队列）
Linux 3.进程间通信(IPC) 进程间通信: 进程间方式: pipe 管道(无名管道) 头文件及原型特点 pipe 示例 FIFO(有名管道) 管道文件的创建 mkfifo 头文件及原型 mk ...
java 命名管道_linux 命名管道实例详解
linux进程间通信--命名管道 FIFO(命名管道)不同于匿名管道之处在于它提供⼀个路径名与之关联,以FIFO的⽂件形式存储于⽂件系统中.命名管道是⼀个设备⽂件,因此,即使进程与创建FIFO的进程不 ...
ASP.NET Core管道深度剖析（2）：创建一个“迷你版”的管道来模拟真实管道请求处理流程
从<ASP.NET Core管道深度剖析(1):采用管道处理HTTP请求>我们知道ASP.NET Core请求处理管道由一个服务器和一组有序的中间件组成,所以从总体设计来讲是非常简单的,但 ...
linux程序间管道通信,linux进程间通信——管道详解
管道是Linux中很重要的一种通信方式,是把一个程序的输出直接连接到另一个程序的输入.常说的管道多是指无名管道, 无名管道只能用于具有亲缘关系的进程之间,这是它与有名管道的最大区别. 有名管道叫nam ...
vue全局变量和局部变量,给vue定义全局的方法
vue2.0 全局变量怎么设置? vue2.0设置全局变量的源码如下:VUE介绍:DisplayOptions显示选项:包括线框显示选项框,填充框,线框,平面阴影和平滑阴影.每个对象及显示窗口均可以对 ...
【嵌入式总复习】Linux管道详解——管道通信、无名管道、有名管道、具体应用示例
目录管道 1. 管道通信 1.1 通信模式 1.2 管道通信中特殊的名词 2. 无名管道(PIPE) 2.1 无名管道的通信原理 2.2 无名管道特点 2.3 如何操作无名管道示例1 示例2 3. ...
linux进程通信1：进程通信概述，管道通信原理(无名管道，有名管道)，管道编程实战
进程通信概述,管道通信原理(无名管道,有名管道),管道编程实战 1.进程间通信概述: 举例1: 你手机微信和别人手机微信通信举例2: 如:父子进程wait 和 exit之间的通信进程间通信(IPC ...
【学习笔记5】管道通信：命名管道
目录一.前言二.基本概念三.命名管道的创建和使用 3.1 函数原型 3.1.1 CreateNamedPipe 3.1.2 ConnectNamedPipe 3.1.3 WaitNamedPip ...

angular2+ 自定义pipe管道实例--定义全局管道及使用

angular2+ 自定义pipe管道实例--定义全局管道及使用相关推荐

最新文章

热门文章