如何在 Angular 中使用多个管道过滤器？

Question

我需要按某些标准过滤对象列表：status, activity,position, category.

我决定创建单独的管道：StatusPipe, ActivityPipe, PositionPipe, CategoryPipe.

如果我使用它我感到困惑：data | statusPipe | activityPipe | positionPipe | categoryPipe.

起初我不需要应用所有管道，只需要在过滤器中选择的管道。我也不知道在哪里存储中间选择的过滤器值，它可以是原始类型，如：status:1 或复杂的：position: {x: 1, y :6}.

我尝试使用 oop 原则，我同意所有过滤器都应该实现一个责任的原则，无论如何它应该是管道 class 或者我的自定义 class.

在我的案例中应用哪种方法才能进一步添加新过滤器？

我的想法是创建自定义实现：

class FilterStatus implements Filter {}

class FilterPosition implements Filter {}

class FilterCategory implements Filter {}

interface Filter {
   apply();
}

然后创建一个过滤器的具体实例并将其放入一个全局管道过滤器。

@Pipe({
    name: 'filter'
})
export class FormatPipe implements PipeTransform {
  transform(arrayForFilter: any, filter: Filter): string {

    return filter.apply(arrayForFilter);
  }
}

但是如果我有一些活跃的过滤器呢？

transform(arrayForFilter: any, filter: Filter[]): string {
}

另一种方法是在管道中注入所有可用的过滤器实现：

 @Pipe({
        name: 'filter'
    })
    export class FormatPipe implements PipeTransform {
      constructor(private filterStatus: FilterStatus, private filterCategory: FilterCategory, private filterPosition: FilterPosition)
      transform(arrayForFilter: any): string {

      }
    }

在这种情况下，我不知道如何知道 whci 过滤器已填充和激活以及如何为即将到来的数据数组应用一些过滤器？

Answer 1

如果它基于过滤器 selection，则不应按照这种方式应用多个管道。

首先，创建一个可以接收值中任何类型数据的通用管道。然后，该 Pipe 添加第二个参数，这将接收要应用的过滤器。在您的管道中，执行 switch 并添加过滤器为 select 的情况，例如：

switch(filter) { case 'status': ... break; case 'category': break; }

这样，您就没有复杂的过滤器和管道。您只需接收要过滤的数据以及过滤方式。

现在，当您更改过滤器时，对您的 select 执行 ngModelChange，这样您就可以使用变量通过管道传递该值，如前所述。

即使您有像 status:1 这样复杂或非常简单的过滤器，您也可以用这种方式做任何您想做的事，而且更容易。

如何在 Angular 中使用多个管道过滤器？

How to use multiple pipe filters in Angular?

angular

angular8