0

ユーザーがいくつかの異なる基準でデータをフィルタリングしたい場合、オンとオフを切り替えたい複数の異なるパイプがあります。検索で現在使用されているパイプをアクティブ化/非アクティブ化する方法、またはユーザーがクリックしたボタンに応じて異なる動作をする単一のパイプを作成するにはどうすればよいですか?

たとえば、2 つのパイプ/フィルターは次のようになります...

//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>

将来もっと多くのことを行うために各パイプを拡張したいので、すべてを同じパイプに入れたくありません。したがって、各パイプは「独自のもの」であり、互いに独立して動作する必要がありますが、必要に応じて他のパイプと連携して動作する必要があります。

4

1 に答える 1

0

次のように使用するパラメータに応じて、他のパイプに転送するラッパー パイプを作成できます。

<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);
    }
  }
}
于 2016-07-31T14:56:17.127 に答える