Angular5中Handsontable v0.35.1验证器能否传递额外参数？

嘿，刚好我对Handsontable v0.35.1在Angular 5里的验证器玩法门儿清，给你几个实用的方案解决传额外参数的问题！

方案1：用闭包工厂函数生成验证器 #

这是最直接的方式，通过一个“工厂函数”接收你需要的额外参数，然后返回真正的Handsontable验证器函数——这样返回的验证器就能闭包住你传入的参数了。举个TypeScript的例子：

// 定义验证器工厂函数，接收额外参数
createColumnValidator(extraParam: any) {
  // 返回符合Handsontable要求的验证器函数
  return function(value: any, callback: Function, cellProperties: any) {
    // 这里可以直接使用传入的extraParam做验证逻辑
    const isValid = value === extraParam; // 举个简单的匹配例子，你可以替换成自己的逻辑
    callback(isValid);
  }
}

// 在columns配置里调用工厂函数生成带参数的验证器
columns: any[] = [
  {
    data: 'columnA',
    validator: this.createColumnValidator('专属列A的参数')
  },
  {
    data: 'columnB',
    validator: this.createColumnValidator('专属列B的参数')
  }
];

这个方案的好处是每个列的验证器都能拿到独立的专属参数，适合不同列需要不同验证规则参数的场景。

方案2：利用cellProperties传递参数 #

Handsontable的验证器函数第三个参数是cellProperties，它包含了当前列/单元格的所有配置信息。你可以在columns配置里给每个列添加自定义属性，然后在验证器里直接读取这些属性作为额外参数：

// 通用的自定义验证器函数
myCustomValidator(value: any, callback: Function, cellProperties: any) {
  // 从cellProperties里取出我们预先配置的自定义参数
  const maxLength = cellProperties.maxInputLength;
  // 这里写你的验证逻辑，比如验证输入长度不超过参数值
  const isValid = value?.length <= maxLength;
  callback(isValid);
}

// 在columns配置里添加自定义参数
columns: any[] = [
  {
    data: 'columnA',
    validator: this.myCustomValidator,
    maxInputLength: 10 // 自定义参数，会被传入cellProperties
  },
  {
    data: 'columnB',
    validator: this.myCustomValidator,
    maxInputLength: 20 // 另一列的参数
  }
];

这个方案适合多个列复用同一个验证器，但需要不同参数的场景，不用重复写多个验证器函数，维护起来更省心。

方案3：绑定组件上下文访问成员变量 #

如果你的额外参数需要和Angular组件的状态联动（比如参数会随用户操作动态变化），可以把验证器写成组件的方法，然后通过箭头函数或者bind确保验证器里的this指向组件，这样就能直接访问组件里的成员变量了：

// 组件内的成员变量，存放各列的验证参数
validationParams = {
  columnA: { allowedValues: ['苹果', '香蕉'] },
  columnB: { minValue: 0, maxValue: 100 }
};

// 组件内的验证器方法
columnValidator(value: any, callback: Function, cellProperties: any) {
  // 根据当前列的data字段，取出对应的验证参数
  const params = this.validationParams[cellProperties.data];
  let isValid = false;
  
  // 针对不同列写对应的验证逻辑
  if (cellProperties.data === 'columnA') {
    isValid = params.allowedValues.includes(value);
  } else if (cellProperties.data === 'columnB') {
    isValid = value >= params.minValue && value <= params.maxValue;
  }
  
  callback(isValid);
}

// 在columns配置里用箭头函数确保this指向组件
columns: any[] = [
  {
    data: 'columnA',
    validator: (value, callback, props) => this.columnValidator(value, callback, props)
  },
  {
    data: 'columnB',
    validator: this.columnValidator.bind(this) // 也可以用bind的方式
  }
];

这个方案的优势是参数能和组件状态实时同步，适合参数动态变化的场景。

以上三个方案都能完美解决你需要给自定义验证器传额外参数的问题，你可以根据自己的业务场景灵活选择~

内容的提问来源于stack exchange，提问作者Naymesh Mistry