Wie erstellt und ruft man eine Pipe von der Komponente in Winkel 2?

Question

Ich möchte eine dynamische Pipe erstellen, die ich von der Komponente aufrufen werde.

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

Ich möchte dieses Rohr von der Komponente aufrufen.

Answer 1

Sie müssen es im pipes Attribut Ihrer Komponente

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

und verwenden Sie es in Ihrer Vorlage speciufy:

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

bearbeiten

Wenn Sie das nennen wollen Pipe direkt innerhalb der Komponente Klasse, müssen Sie es instanziieren und rufen Sie tranform Methode:

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

Answer 2

Sie müssen die Rohre Sie in einer Komponente verwenden möchten, registrieren:

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

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

Um das Rohr ab Lager in das Modul zu Importen, wo Sie verwenden möchten es

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

Wenn Sie das Rohr von Code

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

Answer 3

In Version rc6 anrufen möchten, müssen Sie die Rohre Sie in einem Modul verwenden möchten, registrieren - auf @> Erklärungen

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

Answer 4

Ich wollte nur hinzufügen Pascha-Oleynik Antwort. Angular 2+ einschließlich Ionic 2+ alle erwarten, dass das Rohr in dem Modul deklariert werden:

@NgModule({ 
    declarations: [ 
     AppComponent , 
     filter 
    ] 

Auch dies der einzige Ort ist, dass das Rohr erklärt werden muss. Es gibt keine Pipe-Eigenschaft mehr unter einem Modul oder einer Komponente.