Angular 6多参数Pipe在HTML中的调用方法咨询

嘿，我来帮你理顺这个管道调用的问题！首先得纠正下对Angular管道语法的认知——管道的调用必须用|符号来触发，参数则通过冒号:来分隔，而且管道左侧的值会自动作为transform方法的第一个参数，后面的冒号跟着的才是后续参数。

你的IsInPastPipe里，transform方法第一个参数是date，第二个是time，所以对应到HTML里的调用逻辑是：把row.day作为第一个参数（date）传入，再用冒号带上第二个参数task.time。

正确的代码写法 #

[ngClass]="row.day | isInPast: task.time"

为啥你之前的写法不管用？ #

• 第一种写法[ngClass]="isInPast:row.day:task.time"：完全没遵循Angular管道的语法规则，没有用|来标识管道，Angular根本识别不出这是在调用管道。
• 第二种写法[ngClass]="row.day task.time | isInPast:row.day:task.time"：row.day task.time是无效的表达式，而且还重复传了参数——管道左边的row.day已经是第一个参数了，后面的:row.day属于多余传参，导致参数和transform方法的要求不匹配。

额外要注意的点 #

别忘了在对应的Angular模块里声明这个Pipe，不然会报“管道未找到”的错误哦：

// 比如在app.module.ts里
import { NgModule } from '@angular/core';
import { IsInPastPipe } from './your-pipe-path';

@NgModule({
  declarations: [
    // 这里要加上你的Pipe
    IsInPastPipe,
    // ...其他组件、指令
  ]
})
export class AppModule { }

内容的提问来源于stack exchange，提问作者Marc Rasmussen