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

javascript angular angular2-pipe

2022-08-30 00:03:00

我知道我可以这样称呼管道：

{{ myData | date:'fullDate' }}

此处，日期管道仅采用一个参数。从组件的模板 HTML 中直接在代码中调用具有更多参数的管道的语法是什么？

答案 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];
        ...
    }
}

答案 2

你错过了实际的管道。

{{ myData | date:'fullDate' }}

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

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

您也可以用链条管道，如下所示：

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