为其他元素重用管道过滤器结果答案

【问题标题】：Reuse pipe filter result for other element为其他元素重用管道过滤器结果
【发布时间】：2016-08-28 20:32:02
【问题描述】：

看official angular2 pipes documentation的一个例子，不知是否可以实现如下：

    <div [hidden]="hasFlyingHeroes">
      <span>Heroes fly!</span>
    </div>
    <div *ngFor="let hero of (heroes | flyingHeroes)">
      {{hero.name}}
    </div>

其中“hasFlyingHeroes”使用过滤后的 ngFor 值，以免两次过滤掉 flyHeroes。

【问题讨论】：

标签： angular angular2-pipe

【解决方案1】：

管道用于在不相关的数据之间共享共同行为。

具有特定行为的数据片段可以表示为模型，

@Injectable()
class Heroes extends Array {
  getFlying() {
    return this.filter(hero => hero.canFly);
  }

  hasFlying() {
    return !!this.getFlying().length;
  }  
}

和

<div [hidden]="heroes.hasFlying()">
  <span>Heroes fly!</span>
</div>
<div *ngFor="let hero of heroes.getFlying()">
  {{hero.name}}
</div>

对于使用扩展数组表示的模型，调用getFlying 两次是正常的，因为它有多种修改方式，所以缓存过滤后的集合不会有任何好处。

对于通过特定公共方法（例如add）严格修改的模型，可以使那里的缓存无效并缓存过滤后的集合，getFlying只会被调用一次。

【讨论】：