zoukankan      html  css  js  c++  java
  • angular4 常用pipe管道

    angular中的pipe是用来对输入的数据进行处理,如大小写转换、数值和日期格式化等。

    常用的pipe有

    1. 大小写转换

    <p>{{str | uppercase}}</p>//转换成大写
    <p>{{str | lowercase}}</p>//转换成小写

    2. 日期格式转换

    <p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p> 

    3. 小数位数

    //接收的参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数}
    //保留2~4位小数
    <p>{{p | number:'1.2-4'}}</p> 

    4. JavaScript 对象序列化

    <p>{{ { name: 'semlinker' } | json }}</p> <!-- Output: { "name": "semlinker" } -->

    5. slice

    <p>{{ 'semlinker' | slice:0:3 }}</p> <!-- Output: sem -->

    6. 管道链

    <p>{{ 'semlinker' | slice:0:3 | uppercase }}</p> <!-- Output: SEM -->

    7. 自定义管道

    自定义管道的步骤:

    • 使用 @Pipe 装饰器定义 Pipe 的 metadata 信息,如 Pipe 的名称 - 即 name 属性

    • 实现 PipeTransform 接口中定义的 transform 方法

    1.1 WelcomePipe 定义

    import { Pipe, PipeTransform } from '@angular/core';
    
    @Pipe({ name: 'welcome' })
    export class WelcomePipe implements PipeTransform {
      transform(value: string): string {
        if(!value) return value;
        if(typeof value !== 'string') {
          throw new Error('Invalid pipe argument for WelcomePipe');
        }
        return "Welcome to " + value;
      }
    } 

    1.2 WelcomePipe 使用

    <div>
       <p ngNonBindable>{{ 'semlinker' | welcome }}</p>
       <p>{{ 'semlinker' | welcome }}</p> <!-- Output: Welcome to semlinker -->
    </div>

    2.1 RepeatPipe 定义

    import {Pipe, PipeTransform} from '@angular/core';
    
    @Pipe({name: 'repeat'})
    export class RepeatPipe implements PipeTransform {
        transform(value: any, times: number) {
            return value.repeat(times);
        }
    }

    2.2 RepeatPipe 使用

    <div>
       <p ngNonBindable>{{ 'lo' | repeat:3 }}</p>
       <p>{{ 'lo' | repeat:3 }}</p> <!-- Output: lololo -->
    </div>
  • 相关阅读:
    flask路由+视图
    flask基本使用1
    返回对象时字典化
    python3连接redis
    selected_related和prefetch_related
    django删除migrations导致初始化数据库失效
    vue添加拦截器(身份认证)以及cookie认证
    vue添加使用全局变量
    列表:动手试一试
    转来的字符串编辑方式
  • 原文地址:https://www.cnblogs.com/leiting/p/8880641.html
Copyright © 2011-2022 走看看