离子2框架签名板式构建器问题

Question

当我尝试导航到基于离子2框架的应用中的mytest页面时，我会遇到此错误：

运行时错误 被摘录(在承诺中(：TypeError：SP不是构造函数类型：SP不是signaturepad.ngaftercontentinit(http：//localhost：8100/build/build/main.js：63958：29(在CallProviderLifeCycles(httpp：//JS：11509：17(在CheckAndUpDateView(http：//localhost：8100/build/main.js：12526：5(at CallViewAction(http：//localhost：8100/build/build/main.js：12838：17(，在execcomponemponentViewSational(http：//localhost：8100/build/main.js：12784：13(在checkandupdateview(http：//localhost：8100/build/build/main.js：12529：5(/build/main.js:12838:17(在execembeddedviewsaction(http：//localhost：8100/build/build/main.js：12810：17(上，checkandupdateview(http：//localhost：8100/build/aint/ain.js：125524：5(在CallViewAction(http：//localhost：8100/build/main.js：12838：17(上execcomponentviewsaction(http：//localhost：8100/build/build/main.js：12784：13(//localhost:8100/build/main.js:12529:5(at Callwithdebugcontext(http：//localhost：8100/build/main.js：13511：42(

>

我将一些调试代码放在Angular2-SignaturePad节点模块的signaturepad.prototype.ngaftercontentinit函数中，看起来画布对象是空的。

我在做什么错？

我的源代码：

app.module.ts：

...
import { SignaturePadModule } from 'angular2-signaturepad';
import { IonicStorageModule } from '@ionic/storage';
...
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    CloudModule.forRoot(cloudSettings),
    SignaturePadModule,
    IonicStorageModule.forRoot()
  ],
...

mytest.ts

...
import { SignaturePad } from 'angular2-signaturepad/signature-pad';
import { Storage } from '@ionic/storage';
...
@ViewChild('mySlider') mySlider: any;
@ViewChild(SignaturePad) signaturePad: SignaturePad;
  signaturePadOptions: Object = {
   'minWidth': 2,
   'canvasWidth': 400,
   'canvasHeight': 200,
   'backgroundColor': '#f6fbff',
   'penColor': '#666a73'
  };
  constructor(public viewCtrl: ViewController,
          public auth: Auth,
          public navCtrl: NavController,
          public navParams: NavParams,
          public events: Events,
          public tabsService: TabsService,
          public formBuilder: FormBuilder,
          public alert: AlertController,
          public storage: Storage) {
    this.slide2Form = formBuilder.group({ });
}
...

mytest.html

<ion-content>
<ion-slides #mySlider>
<ion-slide>
  <ion-list no-lines>
    <form [formGroup]="slide2Form">
      <ion-item>
        <ion-label>Date</ion-label>
        <ion-datetime displayFormat="MMMM/DD/YYYY" formControlName="signatureSigned"></ion-datetime>
      </ion-item>
      <ion-item>
        <signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>
        <button ion-button full color="danger" (click)="clearPad()">Clear</button>
      </ion-item>
    </form>
  </ion-list>
  </div>
</ion-slide>  
</ion-slides>                                  
</ion-content>  
...

Answer 1

您的代码似乎还可以，但它可能是signature_pad的问题，也许您不是以正确的方式导入它，请尝试：

import * as SignaturePad from 'signature_pad';

从这里查看代码：https://github.com/wulfsolter/angular2-signaturepad/blob/master/signature-pad.ts

似乎" SP"试图使用" require"

加载模块

此链接可能还会阐明此问题

Answer 2

我发现了问题。我正在导入signature_pad和angular2-signaturepad节点模块。即使我没有使用signature_pad One(它作为Angular2-SignaturePad模块中的依赖项都包含在内(，它仍会导致上面的运行时错误。我删除了signature_pad模块：

npm uninstall signature_pad

我然后重新启动了该应用程序，并且它起作用。

Answer 3

在我的情况下，解决方案是更新为版本2.6.0 (我使用的2.2.0(

npm install angular2-signaturepad@2.6.0 --save