angular之自定义管道

1,装了angular2 的 cli之后,cmd中命令建立个管道文件 ng g p <name>;

  如建一个在pipe文件中建一个add.pipe.ts文件 可以这么么写 ng g p pipe/add;

2,  add.pipe.ts内容如下:

//原始内容import { Pipe, PipeTransform } from ‘@angular/core‘;

@Pipe({
  name: ‘add‘
})
export class AddPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return null;
  }

}//修改transform里面的内容如下:
transform(value: any, arg1: any,arg2: any): any {
    return value;
  }
 

3,如将上面的管道用到 html 上;

如下写法

<ul *ngFor="let item of items | add:‘fang‘:true">
  <li>{{item}}</li>
</ul>

4,看第三步参数分别代表

  第一个参数value 为items;

  第二个参数arg1 为 ‘fang’;

  第三个参数arg2 为true;

  后面返回的数就会替换itemes

5, 记得使用时要声明;将其加到 declarations数组里

时间: 2024-10-15 01:36:22

angular之自定义管道的相关文章

angular自定义管道

对自定义管道的认识 管道的定义中体现了几个关键点: 1.管道是一个带有"管道元数据(pipe metadata)"装饰器的类. 2.这个管道类实现了PipeTransform接口的transform方法,该方法接受一个输入值和一些可选参数,并返回转换后的值. 3.当每个输入值被传给transform方法时,还会带上另一个参数,比如我们这个管道中的exponent(放大指数). 4.我们通过@Pipe装饰器告诉Angular:这是一个管道.该装饰器是从Angular的core库中引入的.

在angular的自定义回调中操作$scope

在angular的controller中有时候会使用到自定义的回调, 比如异步请求的回调函数 一般返回之后都需要更新页面的数据,即更新$scope.xx 但是如果直接 $scope.xx = data.info 这样根本不会有任何的影响 解决方案 this.callback = function (status) { $scope.$apply(function () { $scope.xx = status; }); }; Scope提供$watch方法监视Model的变化. Scope提供$

27自定义管道

①创建一个管道类文件   test.pipe.ts 指定transform方法对于数据和参数的处理,将结果返回 ②声明 app.module.ts import {TestPipe} from   ' *** ' @NgModule ( { declarations : [ TestPipe ] } ) ③调用自定义管道类 用法和内置管道没有区别 原文地址:https://www.cnblogs.com/shanlu0000/p/12229621.html

angular中自定义依赖注入的方法和decorator修饰

自定义依赖注入的方法 1.factory('name',function () { return function(){ } }); 2.provider('name',function(){ this.$get=function(){ return function(){ } }; }); 3.service('name',function(){ this.n=v; }); 4.constant('name','value'); 5value('name','value'); 依赖的继承  

angular的自定义指令---详解

1.angualr指令 在angualr自己里面有许多丰富的指令,但都是平时所常见的,但对于自己所需要的可能有所欠缺,所以自己可能会摒弃原声指令,自己封装更为健壮灵活的指令: 其实angular里面的指令也是基于下面所用到的步骤来创建的,只不过他都添加到了全局中,所以可以直接使用: 2.创建自定义指令 首先创建模块app,再使用app的服务directive方法, 创建指令内容第一个参数自定义的名字,第二个参数是自定义参数属性对象,该对象包括的属性基本在代码注释解释清楚: // a.创建模块 v

Angular过滤器 自定义及使用方法

首先设置自定义过滤器. 定义模块名:angular .module('myApp') .filter('filterName',function(){ return function(要过滤的对象,参数1,参数2,...){ return Obj; //这里返回的是过滤后的对象 } }); 页面中的使用 {{obj | filterName}} ====> obj是要过滤的对象 控制器中使用. 首先要要控制器注入$filter $filter("filterName")(要过滤的

angular可自定义的对话框,弹窗指令

指令不明的,推荐 AngularJS指令参数详解 github地址 以下为示例代码 <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../dist/lib/angular/angular.m

ng2自定义管道

一.管道的作用及本质 作用:数据处理 本质:公用的方法 二.定义管道组件 //summary.pipe.tsimport { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'summary', // pure: false 管道默认为纯管道,如果加了pure:false 则为非纯管道 // 纯管道只能检测纯变更(原始类型(String Number Boolean Symbol)值的更改,或者对对象引用(Date Array

angular创建自定义指令的四种方式

angular除了内置的部分指令,还可以通过.directive来自定义指令.要调用自定义指令,HTML 元素上需要添加自定义指令名.使用驼峰法来命名一个指令:nsHeader,在调用时使用需要-来分割:ns-header.自定义指令调用的的方式有四种,如下: 元素名 属性 类名 注释 1.使用元素名调用: 1 <!DOCTYPE html> 2 <html ng-app="myApp"> 3 <head> 4 <meta charset=&q