come creare e chiamare una pipe dal componente in angular 2?

Question

Voglio creare una pipe dinamica che chiamerò dal componente.

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

Voglio chiamare questo tubo dal componente.

Answer 1

È necessario speciufy entro l'attributo pipes del componente

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

e utilizzarlo nel modello:

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

Modifica

Se si desidera chiamare il pipe direttamente all'interno della classe del componente, è necessario istanziarlo e chiamare il suo metodo tranform:

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

Answer 2

È necessario registrare i tubi che si desidera utilizzare in un componente:

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

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

Per rendere il tubo disponibili aggiungere il modulo alle importazioni in cui si desidera utilizzare it

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

Se si desidera chiamare il tubo dal codice

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

Answer 3

Nella versione RC6 è necessario registrare i tubi che si desidera utilizzare in un modulo -> dichiarazioni

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

Answer 4

volevo solo aggiungere a @ risposta pasha-oleynik. Angolare 2+ 2+ compresi ionico tutti si aspettano il tubo da dichiarare nel modulo:

@NgModule({ 
    declarations: [ 
     AppComponent , 
     filter 
    ] 

Anche questo è l'unico posto che il tubo deve essere dichiarato. Non esiste più una proprietà pipe sotto un modulo o componente.