离子签名板

Question

我已经在我的离子项目中安装了“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>
</ion-content>

这是我的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 {}