Signature_pad: __WEBPACK_IMPORTED_MODULE_1_signature_pad__はコンストラクターではありません

作成日 2018年04月11日  ·  8コメント  ·  ソース: szimek/signature_pad

私はangularcli4.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の初期化に問題がありますか?

signing-pad-componentのこの2行目でエラーが発生しています

SignaturePadComponent.prototype.ngAfterViewInit = function () {
        this._canvas = this._el.nativeElement.querySelector("canvas");
        this._signaturePad = new SignaturePad(this._canvas);
    }; 

"angular / cli": "1.6.8"
"angular2-signature-pad": "^ 1.0.2"
"signature_pad": "^ 2.3.2"
AngularCLIを使用したGoogleChromeの場合

最も参考になるコメント

このライブラリのAngularバージョンを維持していません。

SignaturePadが実際に何であるかを確認できます。これは、実際のコンストラクターであるdefaultプロパティを持つオブジェクトである可能性があるため、 this._signaturePad = new SignaturePad.default(this._canvas);に変更すると修正される可能性があります。 、しかしそれは単なる推測です。

使用しているTypeScriptのバージョンを確認できますか? このライブラリ(Angularライブラリではない)をTS 2.7+でチェックしましたが、正常に動作します。

TSで記述され、TS2.7以降で動作するsignature_padのベータリリースもあります。

全てのコメント8件

このライブラリのAngularバージョンを維持していません。

SignaturePadが実際に何であるかを確認できます。これは、実際のコンストラクターであるdefaultプロパティを持つオブジェクトである可能性があるため、 this._signaturePad = new SignaturePad.default(this._canvas);に変更すると修正される可能性があります。 、しかしそれは単なる推測です。

使用しているTypeScriptのバージョンを確認できますか? このライブラリ(Angularライブラリではない)をTS 2.7+でチェックしましたが、正常に動作します。

TSで記述され、TS2.7以降で動作するsignature_padのベータリリースもあります。

はい、 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);

これは私のために働いた唯一のものでした

これが誰かに役立つ場合、これは私がAngular8で署名パッドを機能させるために行ったことです:

$ npm install --savesignature_pad

cool-component.html:

<div class="wrapper">
  <canvas id="signature-pad" class="signature-pad" width=400 height=200 style="border: 2px solid blue"></canvas>
</div>

cool-component.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 評価