离子签名板

Question

我在我的 ionic 项目中安装了“angular2-signaturepad”，并创建了一个测试应用程序，它运行良好，但是当我尝试与现有项目集成时，显示“signature-pad”不是已知元素”和'

<ion-content padding>
<signature-pad [ERROR ->][options]="signaturePadOptions" 
(onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signatur"): 
ng:///SignPageModule/SignPage.html@10:16
'signature-pad' is not a known element:
1. If 'signature-pad' is an Angular component, then verify that it is part of this module.
2. If 'signature-pad' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

<ion-content padding>
[ERROR ->]<signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplet"): ng:///SignPageModule/SignPage.html@10:1
Error: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'signature-pad'.
1. If 'signature-pad' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'signature-pad' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component

这是我面临的错误。我在 app.module.ts 文件中添加了“CUSTOM_ELEMENTS_SCHEMA，NO_ERRORS_SCHEMA”。

这是我的 sign.html 代码：

<ion-header>
  <ion-navbar>
    <ion-title>sign</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-row [ngClass]="{'drawing-active': isDrawing}">
        <ion-col></ion-col>
        <ion-col style="border: 1px solid #5d6691;">
          <signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()" style="width: 50px; height: 580px; color: red;"> </signature-pad>
        </ion-col>
        <ion-col></ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
         <button ion-button style="color: #fff; background: #e59c9c;" (click)="clearPad()">Clear</button>
        </ion-col>
        <ion-col>
      <button ion-button style="color: #fff; background: #4355a5;" (click)="savePad()">Save</button>
    </ion-col>
    <ion-col>
      <button ion-button style="color: #fff; background: #e59c9c;" (click)="delPad()">delete</button>
    </ion-col>
</ion-row>
<ion-row text-center>
    <ion-col width-120>
      <img [src]="signature" [hidden]= "signature == '' || signature == undefined " style="height: 200px;" />
    </ion-col>
</ion-row>

这是我的 sign.ts 代码：

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';

import { SignaturePad } from 'angular2-signaturepad/signature-pad';
import { Storage } from '@ionic/storage';


@IonicPage()
@Component({
  selector: 'page-sign',
  templateUrl: 'sign.html',
})
export class SignPage {
  public signature = '';
  isDrawing = false;

  @ViewChild(SignaturePad) signaturePad: SignaturePad;
    private signaturePadOptions: Object = {
      'minWidth': 1,
      'canvasWidth': 320,
  'canvasHeight': 200,
  'backgroundColor': '#f6fbff',
  'penColor': '#06219b'
};

  constructor(public navCtrl: NavController, 
    public navParams: NavParams, 
    public storage: Storage, 
    public toastCtrl: ToastController ) {
  }

  ionViewDidLoad() {
this.signaturePad.clear()
 this.storage.get('savedSignature').then((data) => {
  this.signature = data;
}); 
  }

  drawComplete() {
this.isDrawing = false;
  }

  drawStart() {
this.isDrawing = true;
  }

  savePad() {
this.signature = this.signaturePad.toDataURL();
this.storage.set('savedSignature', this.signature);
this.signaturePad.clear();
let toast = this.toastCtrl.create({
  message: 'New Signature saved.',
  cssClass: 'homeToast',
  duration: 3000,
  position: 'top'
});
toast.present();
  }

  clearPad() {
this.signaturePad.clear();
  }

  delPad(){
this.storage.clear();
this.signature = '';
  }

}

这是我的 app.module.ts 代码：

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { SignaturePadModule } from 'angular2-signaturepad';
import { IonicStorageModule } from '@ionic/storage';


@NgModule({
  declarations: [
MyApp,
HomePage
  ],
  imports: [
BrowserModule,
IonicModule.forRoot(MyApp,{
  backButtonText: '',
  autoFocusAssist: true }),
SignaturePadModule,
IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
MyApp,
HomePage
  ],
  providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ]
})
export class AppModule {}

我希望签名板可以正常工作

Answer 1

确保在 sign.module.ts

中也导入模块

import { SignaturePadModule } from 'angular2-signaturepad';


@NgModule({
  imports: [
    ...
    SignaturePadModule
  ],
  declarations: [SignPage]
})
export class SignPageModule {}