如何在Angular 2中从组件创建和调用管道?

问题描述

我想创建一个动态管道，该管道将从组件中调用.

I want to create a dynamic pipe which I am going to call from the component.

import {Component, Pipe, PipeTransform} from 'angular2/core';

@Pipe({ name: 'filter', pure: false })
export class filter implements PipeTransform {
  transform(value) {
    this.items1=value;
    this.ticket1 = [];
    if (this.items1.length >0) {
      for (var i = 0; i < this.items1.length; i++) {
        this.ticket1.push(this.items1[i])
      }
    }
  }
}

我想从组件中调用此管道.

I want to call this pipe from the component.

推荐答案

您需要在组件的pipes属性内指定它

You need to specify it within the pipes attribute of your component

@Component({
  pipes: [ filter ]
})
export class MyComponent {
  (...)
}

并在您的模板中使用它:

and use it in your template:

{{someArray | filter}}
<div *ngFor="someArray | filter">(...)</div>

修改

如果要直接在组件类中调用管道，则需要实例化它并调用其tranform方法:

If you want to call the pipe directly within the component class, you need to instantiate it and call its tranform method:

@Component({
  (...)
})
export class MyComponent {
  constructor() {
    let filterPipe = new filter();
    let arr = [ ... ];
    var fiteredArr = filterPipe.transform(arr);
  }
  (...)
}

这篇关于如何在Angular 2中从组件创建和调用管道?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！