web-dev-qa-db-ja.com

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

コンポーネントからこのパイプを呼び出したいです。

angularpipes-filters
13
Arron

コンポーネントの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);
  }
  (...)
}
24
Thierry Templier

@ pasha-oleynik answerに追加したかっただけです。 Angular 2+ Ionic 2+を含むすべてのモジュールでパイプが宣言されることを期待する：

@NgModule({
    declarations: [
        AppComponent ,
        filter
    ]

また、これはパイプを宣言する必要がある唯一の場所です。モジュールまたはコンポーネントの下にパイププロパティはなくなりました。

4
SimplyComplexable

バージョンrc6では、モジュールで使用するパイプを登録する必要があります->宣言

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

コンポーネントで使用するパイプを登録する必要があります。

@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);
2
Günter Zöchbauer

パイプを異なるモジュールで複数回使用する場合は、すべてのパイプを1つのモジュール（たとえば、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 {}
1
Menelaos Kotsollaris