Angular 2 - 管道可以调用另一个组件内的函数吗? (管道在组件内部使用)

时间:2016-01-26 10:12:20

标签: angularjs angular

我有一个过滤结果列表的基本管道。 但我需要管道在其过滤时调用我的组件中的函数。

简而言之,我有一张带有标记的地图。 这些标记需要更新以镜像过滤的管道列表。

管道和地图当前都有效但不同步。

我在想,如果我可以让管道调用它的组件,那么它可以更新地图。

这是我的基本管道,仅过滤结果列表:

import {Pipe} from 'angular2/core';

@Pipe({
    name: 'mapFilter', 
  pure: true
})

export class MapFilter {
   transform(items, [searchTerms]) { 
      var term = searchTerms[0];  
      var town = searchTerms[2];
      var county = searchTerms[1];

      var filterByTown = false;
      var filterByCounty = false;  

      if(town !== "Filter by Town")
          filterByTown = true;      

      if(county !== "Filter by County")
          filterByCounty = true;

      //Filter options:
        if(!filterByTown && !filterByCounty){
            return items.filter(item => item.name.indexOf(term) !== -1);
        }

        if(filterByTown && !filterByCounty){
            var termResult = items.filter(item => item.name.indexOf(term) !== -1);
            return termResult.filter(item => item.town.indexOf(town) !== -1);
        }

        if(!filterByTown && filterByCounty){
            var termResult = items.filter(item => item.name.indexOf(term) !== -1);
            return termResult.filter(item => item.county.indexOf(county) !== -1);
        }

        if(filterByTown && filterByCounty){
            var termResult = items.filter(item => item.name.indexOf(term) !== -1);
            var townResult = termResult.filter(item => item.town.indexOf(town) !== -1);
            return townResult.filter(item => item.county.indexOf(county) !== -1);
        }    
  }
}

这是我的过滤器的html:

  • 我如何传递地图的标记数组,地图会选择它吗?

  • 我需要在下面的代码中添加“this.markers”

            <tr *ngFor="#item of jobs | mapFilter: [searchTerm, county, town]" class="animated fadeIn" (click)="viewJob(item)"> 
    

1 个答案:

答案 0 :(得分:0)

我不认为管道是这个用例的正确工具。在代码中创建过滤后的数据,并将结果分配给字段并将视图绑定到此字段。 无论如何,管道将紧密耦合到这个组件,所以为什么不首先将代码添加到组件中。

如果你想要追求当前的方法,你可以做的是将其他参数传递给管道,如

<tr *ngFor="let item of jobs | mapFilter: [searchTerm, county, town, markers]" class="animated fadeIn" (click)="viewJob(item)"> 

每次标记更改时都会再次调用管道。