前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Ionic3 自定义管道

Ionic3 自定义管道

作者头像
spilledyear
发布2018-08-21 14:44:18
3920
发布2018-08-21 14:44:18
举报
文章被收录于专栏:小白鼠小白鼠

本文根据官网的例子简单介绍Angular管道的创建和使用,Angular官方文档

创建管道

创建一个管道可以直接使用ionic cli 工具

代码语言:javascript
复制
ionic g pipe sxypie

和创建 指令基本类似,导入导出也是一样的。

sxypie.ts 代码如下

代码语言:javascript
复制
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'sxypie',
  pure: true,       //true表示纯管道, false表示非纯管道
})
export class SxypiePipe implements PipeTransform {

  /**
   * 放大指数
   * {{2 | exponentialStrength: 10}}    2^10 = 1024
   * @param {number} value
   * @param {string} exponent
   * @returns {number}
   */
  transform(value: number, exponent: string): number {
    let exp = parseFloat(exponent);
    return Math.pow(value, isNaN(exp) ? 1 : exp);
  }
}

使用管道

主要模板代码如下

代码语言:javascript
复制
  <p>自定义管道</p>
  <h1>{{2 | sxypie: 10}}</h1><br>
代码语言:javascript
复制
2 和 10  分别就是那两个参数

测试结果如下

自定义管道

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.11.09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 创建管道
  • 使用管道
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档