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

【问题标题】：How to create and call a pipe from the component in Angular 2?如何从 Angular 2 中的组件创建和调用管道？
【发布时间】：2016-04-28 11:39:01
【问题描述】：

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

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

我想从组件中调用这个管道。

【问题讨论】：

标签： angular pipes-filters

【解决方案1】：

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

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

并在您的模板中使用它：

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

编辑

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

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

【讨论】：

我想直接从 MyComponent 类调用..有什么办法可以做到吗？
需要直接实例化，调用transform方法。我更新了我的答案...
管道属性似乎不再存在。还是那样在本地导入管道吗？
如何在组件本身的特定函数调用中调用管道？
管道不再是组件的属性。此更改是 Angular 2 版本的一部分。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我只是想添加到@pasha-oleynik 答案。 Angular 2+ 包括 Ionic 2+ 都希望在模块中声明管道：

@NgModule({
    declarations: [
        AppComponent ,
        filter
    ]

这也是唯一需要声明管道的地方。模块或组件下不再有管道属性。

【讨论】：

【解决方案4】：

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

@Component({
  ...
  pipes: [filter],
  template: `
<div *ngFor="let item of someData | filter">{{item}}</div>
`
  ...})
class SomeComponent {
  someData = [ ... ];
}

@NgModule({
  imports: [CommonModule],
  declarations: [filter]
})
export class MyFilterModule()

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

@NgModule({
  declarations: [AppComponent, SomeComponent],
  imports: [BrowserModule, MyFilterModule]
})
export class AppModuleModule()

如果你想从代码中调用管道

let f = new filter();
f.transform(value, filterArg);

【讨论】：

我想直接从组件调用过滤器，而不是从html模板调用
管道应该在 HTML 中使用。如果你想直接调用它，那么只需创建一个实例let f = new filter()，然后像let result = f.transform(value, [filterArg]);一样调用它

【解决方案5】：

如果您想在不同的模块上多次使用管道，我建议您将所有管道聚合到一个模块中（例如，PipesAggrModule），然后将该模块导入所需的模块中。例如：

my-pipe.module.ts

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

pipes-aggr.module.ts:

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

然后，要使用您的管道，只需将 PipesAggrModule 导入所需的模块即可。

my.module.ts

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

【讨论】：