Angular6使用ngx-signaturepad报set is not a function错误且签名板不显示

根因说明 #

报错的核心原因是ngx-signaturepad是对底层签名库的封装组件，本身不直接提供set、clear等原生签名方法，你需要先访问组件内部的原始签名实例再调用对应API，同时需要适配Angular6的运行规则。

具体修改步骤 #

• 修正@ViewChild查询配置：Angular6默认使用静态查询模式，针对动态渲染的组件需要手动关闭静态查询
• 调整API调用路径：所有原生签名库的方法都需要通过组件实例的signaturePad属性调用
• 版本适配：如果当前安装的是3.x及以上版本的ngx-signaturepad，需要降级到2.x版本，高版本仅支持Angular7+

修正后的核心代码 #

组件部分代码 #

import { Component, ViewChild } from '@angular/core';
import { SignaturePad } from 'ngx-signaturepad/signature-pad';

@Component({
  template: `<signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>`,
  // 可选：增加样式确保签名板正常显示
  styles: [`
    signature-pad {
      display: block;
      width: 500px;
      height: 300px;
      border: 1px solid #e5e5e5;
    }
  `]
})
export class SignaturePadPage{
  // 增加static: false配置适配Angular6
  @ViewChild(SignaturePad, {static: false}) signaturePad: SignaturePad;

  private signaturePadOptions: Object = {
    'minWidth': 5,
    'canvasWidth': 500,
    'canvasHeight': 300
  };

  ngAfterViewInit() {
    // 通过内部signaturePad属性访问原生实例
    this.signaturePad.signaturePad.set('minWidth', 5);
    this.signaturePad.signaturePad.clear();
  }

  drawComplete() {
    console.log(this.signaturePad.signaturePad.toDataURL());
  }

  drawStart() {
    console.log('begin drawing');
  }
}

版本降级命令（如果需要） #

npm install ngx-signaturepad@2.2.0 --save

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