Signature_pad: __WEBPACK_IMPORTED_MODULE_1_signature_pad__ 不是构造函数

创建于 2018-04-11  ·  8评论  ·  资料来源: szimek/signature_pad

我已经使用我的 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+

所有8条评论

我不维护这个库的 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!

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

crazzeto picture crazzeto  ·  8评论

rmmackay picture rmmackay  ·  7评论

c2ofh picture c2ofh  ·  7评论

Sparticuz picture Sparticuz  ·  7评论

auam88 picture auam88  ·  4评论