angular - 为其他元素重用管道过滤器结果

Question

查看官方 angular2 管道文档中的示例，我想知道是否可以实现以下目标：

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

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

Answer 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只会被调用一次。