zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    12月4日
    12月3日
    12月2日
    12月1日
    11月30日
    11月29日
    11月28日
    11月27日
    jquery mobile-按钮控件
    ap web
  • 原文地址:https://www.cnblogs.com/leiting/p/9288491.html
Copyright © 2011-2022 走看看