如何在 Angular 2 的组件中使用管道？

Question

我有一个管道类，它根据您传递的参数返回数据。我知道如何在我的模板 HTML 中使用 | 符号，但我也想在我的组件中使用它。

有没有办法直接从 Angular 2 中的组件或服务内部调用管道？

Answer 1

我从以前的答案中给出了解决这个问题的解决方案：

• @Eran Shabi 的第一个解决方案回答：

您可以从 Pipe 类创建实例，然后在组件类中使用它的 transform 方法，就像这样

@Component({
  ...
})
export class Component {

  method() {
    const date: sting = '24-05-2020';

    const datePipe = new DatePipe();
    const formatedDate = datePipe.transform(date, 'shortTime');
  }
}

• @Alexander Leonov 的第二个解决方案@答案：

您可以使用 @component 标签或在您的 Module 类下为此组件使用 @Module 标签提供 DatePipe 然后使用依赖注入将 DatePipe 实例注入到组件的构造函数中，就像这样

@Component({
  ...
  providers: [DatePipe] // if you want to provide DatePipe under Module see @Alexander Leonov answer
})
export class Component {

  Component(private _datePipe: DatePipe) {
  }

  method() {
    const date: sting = '24-05-2020';

    const formatedDate = this._datePipe.transform(date, 'shortTime');
  }
}

注意事项：

• 与内置管道类一样，您的自定义管道也可以应用此解决方案

• 此解决方案适用于 Angular v7+，我不知道是否适用于 Angular v2

Answer 2

我会将您尝试执行的操作的可重用部分保留在单独的服务中，然后可以将其注入到任何地方。这感觉就像是滑坡到不太可测试和可重复使用的东西。

Answer 3

您可以使用以下方法直接在代码中调用您的管道：

YourPipeClass.prototype.transform(value, arg1, arg2);

您可以从组件内部或从其他任何导入它的地方调用它。

还有new的方式：

new SortTodosPipe().transform(value, arg1, arg2);

但请记住，它会创建一个对象，因此要么保存该对象以供以后使用，要么使用prototype 方法。

无论您选择什么，如果您在组件中使用它，则必须将管道添加到您的providers，如下所示：

@NgModule({
    providers: [YourPipe]
})

Answer 4

我会实例化它并将其称为“转换”方法。我会这样做：

• 因为有些管道可能不是纯的（即不是无状态的）。此类管道包含与实例关联的状态。
• 因为管道支持依赖注入，所以在实例化它时可能需要提供一些参数。

这是一个带有样本值和参数的样本：

import {FilterPipe} from './my.pipe';

(...)

@Component({
  (...)
})
export class SomeComponent {
  someMethod() {
    var val = [
      { name: 'test', fieldName: 'fieldvalue' },
      (...)
    ];
    var params = [ 'fieldName', 'fieldValue' ];

    var p = new FilterPipe();
    var result = p.transform(val, params);
  }
}

在模板中，例如这样使用：

<div *ngFor="#elt of val | filter:'fieldName':'fieldValue'">
  {{elt.name}}
</div>