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

Question

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

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

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

Answer 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);
  }
  (...)
}

Answer 2

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

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

Answer 3

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

@NgModule({
    declarations: [
        AppComponent ,
        filter
    ]

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

Answer 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);

Answer 5

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

＆＃xA;＆＃xA;

my-pipe.module.ts

＆＃xA;＆＃xA ;

  @Pipe（{name：'MyPipe'}）＆＃xA;导出类MyPipe {...}＆＃xA;  

＆＃xA;＆＃xA;

<强> <代码>管-aggr.module.ts ：

＆＃XA;＆＃XA;

 <代码> @NgModule（{＆＃XA ;进口：＆＃XA; CommonModule＆＃XA]，＆＃XA;出口：＆＃XA; ...＆＃XA; MyPipe，＆＃XA; MyPipe2，＆＃XA; ...＆＃XA ]，＆＃XA;声明：[...，MyPipe，MyPipe2，...]＆＃XA;}）＆＃XA;出口类PipesAggrModule {}＆＃XA;  

＆ #xA;＆＃xA;

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

＆＃xA;＆＃xA;

my.module.ts

＆＃xA;＆＃xA;

  @NgModule（{＆＃xA; imports：[＆＃ XA; CommonModule，＆＃XA; PipesAggrModule＆＃XA;]，＆＃XA; ...＆＃XA;}＆＃XA;出口类MyModule的{}＆＃XA;  

＆＃XA ;