码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-07-10 14:44:09      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:from   att   string   col   slice   img   手动   目录   模块   

首先到项目目录下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>

 

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

标签:from   att   string   col   slice   img   手动   目录   模块   

原文地址:https://www.cnblogs.com/leiting/p/9288491.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!