Question

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

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

Answer 1

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

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

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

还有new方式：

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

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

无论如何，如果你在组件中使用它，你必须将管道添加到providers，如下所示：

@NgModule({
    providers: [YourPipe]
})

Answer 2

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

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

以下是包含样本值和参数的示例：

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>

Answer 3

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

Answer 4

我提供了从以前的答案中解决此问题的解决方案：

来自@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');
  }
}

通知：

就像内置Pipes类一样，您的自定义Pipe也可以应用此解决方案
此解决方案适用于Angular v7 +，我不知道可以与Angular v2一起使用

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

4 个答案: