标签: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