Signature_pad: __WEBPACK_IMPORTED_MODULE_1_signature_pad__ ليس منشئ

تم إنشاؤها على ١١ أبريل ٢٠١٨ · 8تعليقات · مصدر: szimek/signature_pad

لقد قمت باستيراد وحدة لوحة التوقيع angular2 مع تطبيق angular cli 4.0 الخاص بي. لقد اتبعت تعليمات 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؟

حدث خطأ مع هذا السطر الثاني في مكون لوحة التوقيع

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"
على Google Chrome مع CLI الزاوي

مصدر

erangaapp

التعليق الأكثر فائدة

لا أحتفظ بنسخة Angular من هذه المكتبة.

يمكنك التحقق مما هو SignaturePad الموجود بالفعل - قد يكون هذا كائنًا بخاصية default ، وهي المُنشئ الفعلي ، لذلك ربما يمكن تغييره إلى this._signaturePad = new SignaturePad.default(this._canvas); لإصلاحه ، لكنها مجرد تخمين.

هل يمكنك التحقق من إصدار TypeScript الذي تستخدمه؟ لقد راجعت هذه المكتبة (وليست Angular) باستخدام TS 2.7+ وهي تعمل بشكل جيد.

هناك أيضًا إصدار تجريبي من signature_pad مكتوب بلغة TS ويجب أن يعمل مع TS 2.7+

szimek في ١١ أبريل ٢٠١٨

👍4 🎉1

ال 8 كومينتر

لا أحتفظ بنسخة Angular من هذه المكتبة.

هل يمكنك التحقق من إصدار TypeScript الذي تستخدمه؟ لقد راجعت هذه المكتبة (وليست Angular) باستخدام TS 2.7+ وهي تعمل بشكل جيد.

هناك أيضًا إصدار تجريبي من signature_pad مكتوب بلغة TS ويجب أن يعمل مع TS 2.7+

szimek في ١١ أبريل ٢٠١٨

👍4 🎉1

نعم إنه يعمل مع this._signaturePad = new SignaturePad.default(this._canvas);
شكرا جزيلا szimek

erangaapp في ١١ أبريل ٢٠١٨

erangaappszimek كيف حالكم يا رفاق new SignaturePad ؟ هل تستورد أي شيء؟ أنا أستخدم أيضًا https://github.com/dimpu/angular2-signature-pad

pedrofg في ٢٧ أبريل ٢٠١٨

يمكنك استيراده من signature_pad

npm install --save signature_pad
import * as SignaturePad from 'signature_pad';

erangaapp في ٢٧ أبريل ٢٠١٨

erangaapp شكرا حصلت عليه. سؤال آخر ، هل قمت بتغيير السطر إلى this._signaturePad = new SignaturePad.default(this._canvas); في node_modules لمشروعك؟ داخل كود lib نفسه؟ أو يمكنك القيام بذلك في كود مشروعك؟

pedrofg في ٢٧ أبريل ٢٠١٨

لقد قمت بتدويرها عبر أدناه

window.SignaturePad = require('signature_pad').default

glaidler في ١٢ أبريل ٢٠١٩

👍1

this._signaturePad = new SignaturePad.default(this._canvas);

كان هذا هو الشيء الوحيد الذي نجح معي

jacobjackson888 في ١٣ يونيو ٢٠١٩

في حال كان هذا مفيدًا لأي شخص ، فهذا ما فعلته للحصول على لوحة التوقيع تعمل مع Angular 8:

تثبيت $ npm - حفظ signature_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>

بارد 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!