angular - Angular Component 中的链式自定义管道

Question

我知道您可以像这样在组件中使用自定义管道..

// ...
import { CoolPipe } from './cool.pipe';

// ...
export class AppComponent {

  constructor(private _coolPipe: CoolPipe) {}

  pipe(value) {
    return this._coolPipe.transform(value);
  }
}

但是如何链接管道呢？

在 Angular html 组件中，您可以执行以下操作

<div *ngFor="let item of items | filter: filters | order: order">
</div>

是否有可以在 Angular 组件中使用的等效项？

我知道我可以在 html 组件中执行此操作，但我想在 component.ts 文件中执行此操作

我能想到的唯一方法是

pipe(value) {
   let newValue;
   newValue = this._filterPipe.transform(value);
   newValue = this._orderPipe.transform(value)
   return newValue;
}

这样的事情会奏效吗？这是最好的方法吗？

我的用例如下

我创建了 3 个管道 filter、search、order

现在在我的 component.html 中我有以下场景

<div *ngIf="(items | filter: filter | order: order | search: searchTerm).length === 0 && value && !otherValue"></div>

现在这让我的 html 组件变得困惑，所以我想将这个逻辑移到我的 component.ts 文件中，移到一个返回 true 或 false< 的函数中

这可能吗...

Answer 1

只需创建一个 util(礼貌:Andy Van Slaars)，如下所示:

const _pipe = (f, g) => (...args) => g(f(...args))
export const pipe = (...fns) => fns.reduce(_pipe);

然后，像这样在您的 TS 中使用它:

import { Component } from '@angular/core';
import { UpperCasePipe } from './upper-case.pipe';
import { LowerCasePipe } from './lower-case.pipe';
import { DasherPipe } from './dasher.pipe';
import { pipe } from './pipe.util';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  ngOnInit() {
    const { transform: upperCaseTransform } = new UpperCasePipe();
    const { transform: lowerCaseTransform } = new LowerCasePipe();
    const { transform: dashTransform } = new DasherPipe();
    console.log(pipe(
      upperCaseTransform,
      lowerCaseTransform,
      dashTransform
    )(this.name));
  }
}