如何调用具有多个参数的 Angular 2 管道？

Question

我知道我可以这样调用管道：

{{ myData | date:'fullDate' }}

这里的日期管道只接受一个参数。

从组件的模板 HTML 和直接在代码中调用具有更多参数的管道的语法是什么？

原文由 Eran Shabi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在组件的模板中，您可以通过用冒号分隔多个参数来使用它们：

 {{ myData | myPipe: 'arg1':'arg2':'arg3'... }}

从您的代码来看，它将如下所示：

 new MyPipe().transform(myData, arg1, arg2, arg3)

在管道内的转换函数中，您可以使用如下参数：

 export class MyPipe implements PipeTransform {
 // specify every argument individually
 transform(value: any, arg1: any, arg2: any, arg3: any): any { }
 // or use a rest parameter
 transform(value: any, ...args: any[]): any { }
 }

Beta 16 及之前 (2016-04-26)

管道采用一个包含所有参数的数组，因此您需要像这样调用它们：

 new MyPipe().transform(myData, [arg1, arg2, arg3...])

您的转换函数将如下所示：

 export class MyPipe implements PipeTransform {
 transform(value:any, args:any[]):any {
 var arg1 = args[0];
 var arg2 = args[1];
 ...
 }
 }

原文由 Eran Shabi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你错过了实际的管道。

 {{ myData | date:'fullDate' }}

多个参数可以用冒号 (:) 分隔。

 {{ myData | myPipe:'arg1':'arg2':'arg3' }}

你也可以链接管道，像这样：

 {{ myData | date:'fullDate' | myPipe:'arg1':'arg2':'arg3' }}

原文由 Eugene 发布，翻译遵循 CC BY-SA 3.0 许可协议