Ich habe das Angular2-Signature-Pad-Modul mit meiner Angular CLI 4.0-App importiert. Ich habe die Anweisungen von https://github.com/dimpu/angular2-signature-pad beim Importieren in ein neues Modul befolgt (nicht in das App-Modul). Damit wird die Leinwand des Unterschriftenpads perfekt gerendert. Leider mit folgendem Fehler und es funktioniert nicht wie erwartet.
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)
Bei der Initialisierung des SignaturePad ist etwas schief gelaufen ?
Bei dieser zweiten Zeile auf Signatur-Pad-Komponente tritt ein Fehler auf
SignaturePadComponent.prototype.ngAfterViewInit = function () {
this._canvas = this._el.nativeElement.querySelector("canvas");
this._signaturePad = new SignaturePad(this._canvas);
};
"Winkel/Kli": "1.6.8"
"angular2-signature-pad": "^1.0.2"
"signature_pad": "^2.3.2"
Auf Google Chrome mit eckiger CLI
Ich pflege keine Angular-Version dieser Bibliothek.
Sie können überprüfen, was SignaturePad
tatsächlich dort ist - es könnte sein, dass es sich um ein Objekt mit der Eigenschaft default
handelt, die der eigentliche Konstruktor ist, also könnte es vielleicht durch Ändern in this._signaturePad = new SignaturePad.default(this._canvas);
behoben werden , aber es ist nur eine Vermutung.
Können Sie überprüfen, welche Version von TypeScript Sie verwenden? Ich habe diese Bibliothek (nicht die von Angular) mit TS 2.7+ überprüft und sie funktioniert einwandfrei.
Es gibt auch eine Betaversion von signature_pad, die in TS geschrieben ist und mit TS 2.7+ funktionieren sollte
Ja, es funktioniert mit this._signaturePad = new SignaturePad.default(this._canvas);
Vielen Dank szimek
@erangaapp @szimek wie macht ihr new SignaturePad
? Importieren Sie etwas? Ich verwende auch das https://github.com/dimpu/angular2-signature-pad
Sie können es aus dem signature_pad importieren
npm install --save signature_pad
import * as SignaturePad from 'signature_pad';
@erangaapp Danke, ich habe es verstanden. Eine andere Frage, haben Sie die Zeile in $ node_modules
Ihres Projekts in this._signaturePad = new SignaturePad.default(this._canvas);
geändert? Innerhalb des Lib-Codes selbst? Oder können Sie es in Ihrem Projektcode tun?
Ich habe es über das Folgende umgangen
window.SignaturePad = require('signature_pad').default
this._signaturePad = new SignaturePad.default(this._canvas);
Dies war das einzige, was für mich funktionierte
Falls dies für jemanden hilfreich ist, habe ich Folgendes getan, um das Signaturpad mit Angular 8 zum Laufen zu bringen:
$ npm install --save signature_pad
coole-komponente.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);
}
}
Danke, dass du diese Bibliothek zusammengestellt hast, @szimek!
Hilfreichster Kommentar
Ich pflege keine Angular-Version dieser Bibliothek.
Sie können überprüfen, was
SignaturePad
tatsächlich dort ist - es könnte sein, dass es sich um ein Objekt mit der Eigenschaftdefault
handelt, die der eigentliche Konstruktor ist, also könnte es vielleicht durch Ändern inthis._signaturePad = new SignaturePad.default(this._canvas);
behoben werden , aber es ist nur eine Vermutung.Können Sie überprüfen, welche Version von TypeScript Sie verwenden? Ich habe diese Bibliothek (nicht die von Angular) mit TS 2.7+ überprüft und sie funktioniert einwandfrei.
Es gibt auch eine Betaversion von signature_pad, die in TS geschrieben ist und mit TS 2.7+ funktionieren sollte