如何在Angular 12管道中传递多个参数并解决TS2339报错问题

问题根因 #

你当前触发错误和参数无法正常传递有两个核心原因：

• 模板中的abc、def、xyz如果是固定字面量，你没有加引号，Angular会默认将其识别为AppComponent类中定义的属性，找不到就会抛出TS2339错误；如果是自定义变量，你没有在组件类中声明对应属性。
• 管道transform方法的参数定义规则有误：Angular管道的transform方法第一个入参永远是管道左侧的输入值，后面的入参才对应你用:分隔传递的自定义参数，你当前的参数顺序、数量都和实际传递的不匹配。

修改方案 #

第一步：调整管道transform方法定义 #

你在模板中总共传递了3个自定义参数，因此transform方法需要定义4个入参：

transform(inputValue: any, param1: any, param2: any, param3: any): string {
  // 说明：inputValue对应管道左侧的20，param1对应abc，param2对应def，param3对应xyz
  // 你可以根据业务需求调整参数的使用顺序
  return "Your value is " + inputValue + "your x value is" + param2 + "and your curr value is" + param1;
}

如果你不确定后续会传多少个参数，也可以用剩余参数语法简化定义：

transform(inputValue: any, ...params: any[]): string {
  const [param1, param2, param3] = params;
  return "Your value is " + inputValue + "your x value is" + param2 + "and your curr value is" + param1;
}

第二步：修正HTML模板调用 #

如果你传的是固定字符串字面量，给参数加单引号即可：

<h1>{{20 | usdPkr: 'abc' : 'def' : 'xyz' }}</h1>

如果你传的是组件内的自定义变量，需要先在AppComponent类中声明对应属性，就不会触发属性不存在的错误：

export class AppComponent {
  // 声明模板中用到的三个变量
  abc = '自定义参数1';
  def = '自定义参数2';
  xyz = '自定义参数3';
  // 其他原有代码
}

内容的提问来源于stack exchange，提问作者Atif Azad