我已经使用我的 angular cli 4.0 应用程序导入了 angular2-signature-pad 模块。 我已按照https://github.com/dimpu/angular2-signature-pad的说明导入新模块。(不是应用程序模块)。 有了这个,签名板画布可以完美呈现。 不幸的是,出现以下错误并且它没有按预期工作。
ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_signature_pad__ is not a constructor
at SignaturePadComponent.ngAfterViewInit (signature-pad.component.js:60)
at callProviderLifecycles (core.js:12702)
at callElementProvidersLifecycles (core.js:12669)
at callLifecycleHooksChildrenFirst (core.js:12652)
at checkAndUpdateView (core.js:13807)
at callViewAction (core.js:14149)
at execEmbeddedViewsAction (core.js:14107)
at checkAndUpdateView (core.js:13799)
at callViewAction (core.js:14149)
at execComponentViewsAction (core.js:14081)
SignaturePad 的初始化有问题吗?
signature-pad-component 上的第二行出现错误
SignaturePadComponent.prototype.ngAfterViewInit = function () {
this._canvas = this._el.nativeElement.querySelector("canvas");
this._signaturePad = new SignaturePad(this._canvas);
};
“角度/cli”:“1.6.8”
“angular2-signature-pad”:“^1.0.2”
“签名垫”:“^2.3.2”
在带有角度 CLI 的 Google Chrome 上
我不维护这个库的 Angular 版本。
您可以检查SignaturePad
实际存在的内容 - 它可能是具有default
属性的对象,它是实际的构造函数,因此也许将其更改为this._signaturePad = new SignaturePad.default(this._canvas);
可以修复它,但这只是一个猜测。
你能检查一下你使用的是哪个版本的 TypeScript 吗? 我用 TS 2.7+ 检查了这个库(不是 Angular 库),它工作正常。
还有一个签名板的 beta 版本,它是用 TS 编写的,应该适用于 TS 2.7+
是的,它适用于this._signaturePad = new SignaturePad.default(this._canvas);
非常感谢 szimek
@erangaapp @szimek你们是怎么做的new SignaturePad
? 你进口什么吗? 我也在使用https://github.com/dimpu/angular2-signature-pad
您可以从 signature_pad 导入它
npm install --save signature_pad
import * as SignaturePad from 'signature_pad';
@erangaapp谢谢我明白了。 另一个问题,你是不是把你项目的node_modules
中的行改成了this._signaturePad = new SignaturePad.default(this._canvas);
? 在 lib 代码本身内部? 或者你可以在你的项目代码中做到这一点?
我通过下面的方法绕过了它
window.SignaturePad = require('signature_pad').default
this._signaturePad = new SignaturePad.default(this._canvas);
这是唯一对我有用的东西
如果这对任何人都有帮助,这就是我为使签名板与 Angular 8 一起工作所做的工作:
$ npm install --save signature_pad
酷组件.html:
<div class="wrapper">
<canvas id="signature-pad" class="signature-pad" width=400 height=200 style="border: 2px solid blue"></canvas>
</div>
酷组件.ts:
import { Component, OnInit, ElementRef } from '@angular/core';
import * as SignaturePad from 'signature_pad'
...
export class CoolComponent implements OnInit {
_canvas
_signaturePad
constructor(private el: ElementRef) { }
ngOnInit() {
}
ngAfterViewInit(){
this._canvas = this.el.nativeElement.querySelector("canvas");
this._signaturePad = new SignaturePad.default(this._canvas);
}
}
感谢您将这个库放在一起,@szimek!
最有用的评论
我不维护这个库的 Angular 版本。
您可以检查
SignaturePad
实际存在的内容 - 它可能是具有default
属性的对象,它是实际的构造函数,因此也许将其更改为this._signaturePad = new SignaturePad.default(this._canvas);
可以修复它,但这只是一个猜测。你能检查一下你使用的是哪个版本的 TypeScript 吗? 我用 TS 2.7+ 检查了这个库(不是 Angular 库),它工作正常。
还有一个签名板的 beta 版本,它是用 TS 编写的,应该适用于 TS 2.7+