使用 Ionic 的签名绘图板不起作用

Question

我正在使用 Angular 和 ionic 开发本机移动应用程序，我正在尝试在页面上添加签名区域，但出现了一些错误

我添加了这个包：angular2-signaturepad

我正在关注本教程：https://devdactic.com/signature-drawpad-ionic-2/

HTML 内容：

<div class="title">Please draw your Signature</div>
    <ion-row [ngClass]="{'drawing-active': isDrawing}">
      <ion-col></ion-col>
      <ion-col>
        <signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>
      </ion-col>
      <ion-col></ion-col>

    </ion-row>
    <button ion-button full color="danger" (click)="clearPad()">Clear</button>
    <button ion-button full color="secondary" (click)="savePad()">Save</button>

    <ion-row>
      <ion-col></ion-col>
      <ion-col width-80>
        <img [src]="signature"/>
      </ion-col>
      <ion-col></ion-col>
    </ion-row>

page.ts 内容：

signature = '';
isDrawing = false;

import { SignaturePad } from 'angular2-signaturepad/signature-pad';
@ViewChild(SignaturePad) signaturePad: SignaturePad;
  private signaturePadOptions: Object = {
    minWidth: 2,
    canvasWidth: 400,
    canvasHeight: 200,
    backgroundColor: '#f6fbff',
    penColor: '#666a73'
  };

ionViewDidEnter() {
    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();
  }

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

我的编辑器的这一行也有错误：

<signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>

错误： 'signature-pad' 不是已知元素：

1. 如果 'signature-pad' 是一个 Angular 组件，则验证它是该模块的一部分。

2. 如果“signature-pad”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。

Answer 1

在你的模块中

import { NgModule ,CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';<-----add

@NgModule({
  imports: [

    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    TranslateModule,

  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],<-------add
  declarations: [IntroPage]
})
export class yourpage {}