Angular 2, erstellen Sie dynamisch eine benutzerdefinierte Pipe basierend auf Benutzereinstellung

Question

Ich habe mehrere verschiedene Pipes, die ich ein- und ausschalten möchte, wenn der Benutzer ihre Daten nach verschiedenen Kriterien filtern möchte. Wie würde ich die derzeit in einer Suche verwendeten Pipes aktivieren/deaktivieren oder eine einzelne Pipe erstellen, die sich je nach den Schaltflächen, auf die der Benutzer geklickt hat, anders verhält?

Zum Beispiel zwei Leitungen/Filter würden wie folgt aussehen ...

//cloud.pipe.ts 
import {Pipe} from '@angular/core'; 
import {Hero} from './hero'; 

@Pipe({ 
    name: 'Cloud' 
}) 
export class CloudPipe{ 
    transform(value) { 
    if (value == null) { 
     return null; 
    } 
    return value.filter(hero => { 
     return hero.cloud === true; 
    }); 
    } 
} 
//location.pipe.ts 
import {Pipe} from '@angular/core'; 
import {Hero} from './hero'; 
import { HeroService } from './hero.service'; 
import { HeroesComponent } from './heroes.component'; 

@Pipe({ 
    name: 'Location' 
}) 

export class LocationPipe{ 
    transform(value) { 
    if (value == null) { 
     return null; 
    } 
    return value.filter(hero => { 
     return hero.location < 500; 
    }); 
    } 
} 

Dann würde Ich mag den Benutzer Umschaltflächen verschiedene Filter haben und hinzufügen/entfernen Rohre in die Liste. Was ist der beste Ansatz für so etwas?

Ich würde lieber nicht alles in der gleichen Leitung haben, wie ich jede Leitung erweitern möchte, um in Zukunft mehr zu tun. So sollte jedes Rohr "sein eigenes" sein und unabhängig voneinander arbeiten, aber gleichzeitig mit anderen Rohren arbeiten, wenn es notwendig ist.

Answer 1

Sie könnten einen Wrapper Rohr erstellen, die in Abhängigkeit von Parametern in andere Rohre leitet wie

<div *ngFor="let hero of heroes | myPipe:'Cloud':'Location'" ></div> 

verwendet werden

@Pipe({ 
    name: 'myPipe' 
}) 
export class MyPipe{ 
    locationPipe = new LocationPipe(); 
    cloudPipe = new CloudPipe(); 
    constructor() { 
    pipes = { 
     locationPipe: this.locationPipe, 
     cloudPipe: this.clouldPipe 
    }; 
    } 

    transform(value, param1, param2) { 
    var result = value; 
    if(pram1) { 
     result = this.pipes[param1].transform(result); 
    } 
    if(pram2) { 
     result = this.pipes[param1].transform(result); 
    } 
    } 
} 

oder wenn die Rohre Liste wird als Array verwendet wie

<div *ngFor="let hero of heroes | myPipe:['Cloud':'Location']" ></div> 

@Pipe({ 
    name: 'myPipe' 
}) 
export class MyPipe{ 
    locationPipe = new LocationPipe(); 
    cloudPipe = new CloudPipe(); 
    constructor() { 
    pipes = { 
     locationPipe: this.locationPipe, 
     cloudPipe: this.clouldPipe 
    }; 
    } 

    transform(value, params) { 
    var result = value; 
    for(var p in params) { 
     result = this.pipes[p].transform(result); 
    } 
    } 
}