Angular 2, construire dynamiquement un tuyau personnalisé en fonction des préférences de l'utilisateur

Question

J'ai plusieurs tuyaux différents que je voudrais activer et désactiver si l'utilisateur veut filtrer leurs données par des critères différents. Comment activer/désactiver les tuyaux actuellement utilisés dans une recherche ou construire un seul tuyau qui se comporte différemment en fonction des boutons sur lesquels l'utilisateur a cliqué?

Par exemple, deux tuyaux/filtres ressembleraient cette ...

//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; 
    }); 
    } 
} 

Alors je voudrais que l'utilisateur bascule différents boutons de filtre et ajouter/supprimer des tuyaux à la liste. Quelle est la meilleure approche pour quelque chose comme ça? Je préférerais ne pas avoir tout dans le même tuyau que je voudrais prolonger chaque tuyau pour en faire plus dans le futur. Chaque tuyau doit donc être "propre" et fonctionner indépendamment l'un de l'autre, mais en même temps, il doit fonctionner avec d'autres tuyaux si nécessaire.

Answer 1

On peut créer un tuyau d'enveloppe qui transfère à d'autres tubes en fonction des paramètres à utiliser comme

<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, param1, param2) { 
    var result = value; 
    if(pram1) { 
     result = this.pipes[param1].transform(result); 
    } 
    if(pram2) { 
     result = this.pipes[param1].transform(result); 
    } 
    } 
} 

ou si la liste des tuyaux est utilisé en tant que matrice comme

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