Угловая 2, динамически создайте пользовательскую трубку на основе предпочтений пользователя

Question

У меня есть несколько разных труб, которые я бы хотел включить и выключить, если пользователь хочет отфильтровать свои данные по некоторым другим критериям. Как мне активировать/деактивировать трубы, используемые в настоящее время в поиске, или построить один канал, который ведет себя по-разному в зависимости от того, на какие кнопки нажал пользователь?

Например, две трубы/фильтры будут выглядеть следующим образом ...

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

Тогда я хотел бы иметь пользователю переключать различные кнопки фильтра и добавить/удалить трубы к списку. Какой лучший подход для чего-то подобного?

<!--Toggle what pipes should be used in search--> 
<!--For example how can I construct the "updatePipe" function for doing this?--> 
<button id="activateCloud" (click)="updatePipe()"></button> 
<button id="activateLocation" (click)="updatePipe()"></button> 
<!--Is it possible to have: neither of the pipes active, both at the same time or just one at the time? How can I do this?--> 
<div *ngFor="let hero of heroes | Cloud | Location ></div> 

Я бы предпочел не иметь все в одной и той же трубе, поскольку я хотел бы расширить каждую трубу, чтобы делать больше в будущем. Поэтому каждая труба должна «быть ее собственной» и работать независимо друг от друга, но в то же время работать вместе с другими трубами, когда это необходимо.

Answer 1

Вы можете создать оболочку трубы, которая перенаправляет на другие трубы в зависимости от параметров, которые будут использоваться как

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

или если список труб используется как массив, как

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