如何从Angular 2中的组件创建和调用管道？

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

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])
      }
    }
  }
}

从'angular2/core'导入{Component，Pipe，PipeTransform}；
@管道（{name:'filter'，pure:false}）
导出类筛选器实现PipeTransform{
转换（值）{
此.items1=值；
this.ticket1=[]；
如果（this.items1.length>0）{
对于（var i=0；i

---

我想从组件调用此管道。

您需要在组件的

管道

属性中指定它

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])
      }
    }
  }
}

@组件({
管道：[过滤器]
})
导出类MyComponent{
(...)
}

并在模板中使用它：

{{someArray|filter}
(...)

编辑

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

tranform

方法：

@组件({
(...)
})
导出类MyComponent{
构造函数（）{
设filterPipe=newfilter（）；
设arr=[…]；
var fiteredar=filterPipe.transform（arr）；
}
(...)
}

您需要注册要在组件中使用的管道：

@组件({
...
管道：[过滤器]，
模板：`
{{item}}
`
...})
类SomeComponent{
someData=[…]；
}

@NgModule({
导入：[CommonModule]，
声明：[过滤器]
})
导出类MyFilterModule（）

若要使管道可用，请将模块添加到要使用它的导入中

@NgModule({
声明：[AppComponent，SomeComponent]，
导入：[BrowserModule，MyFilterModule]
})
导出类AppModuleModule（）

如果要从代码调用管道

设f=newfilter（）；
f、 变换（值，filterArg）；

在版本rc6中，您需要注册要在模块->声明中使用的管道

@NgModule({
    declarations: [
        AppComponent ,
        filter
    ]....

我只是想补充一下答案。角度2+，包括离子2+，所有管道均应在模块中声明：

@NgModule({
    declarations: [
        AppComponent ,
        filter
    ]

---

此外，这是唯一需要声明管道的位置。模块或组件下不再有管道属性。

如果您想在不同的模块上多次使用管道，我建议您将所有管道聚合到一个模块中（例如，

PipesAggrModule

），然后将此模块导入所需模块。例如：

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])
      }
    }
  }
}

my pipe.module.ts

@Pipe({name: 'MyPipe'})
export class MyPipe { ... }

@NgModule({
  imports: [
    CommonModule,
    PipesAggrModule
  ],
...
}
export class MyModule {}

管道聚合模块.ts

：

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    ...
    MyPipe,
    MyPipe2,
    ...
  ],
  declarations: [..., MyPipe, MyPipe2, ...]
})
export class PipesAggrModule {}

然后，要使用管道，只需将导入

PipesAggrModule

导入所需模块即可

my.module.ts

@Pipe({name: 'MyPipe'})
export class MyPipe { ... }

@NgModule({
  imports: [
    CommonModule,
    PipesAggrModule
  ],
...
}
export class MyModule {}

---

我想直接从组件调用过滤器，而不是从html模板调用过滤器。html中应该使用管道。如果您想直接调用它，那么只需创建一个实例

let f=new filter（）

，然后像

let result=f.transform（value，[filterArg]）那样调用它

我想直接从MyComponent类调用..有什么方法可以这样做吗？您需要直接实例化它并调用

transform

方法。我更新了我的答案…管道属性似乎已经不存在了。这仍然是本地导入管道的方法吗？如何在从组件本身调用特定函数时调用管道？管道不再是组件的属性。这一变化是Angular 2发行版的一部分。