Question

我正在尝试在我的离子3项目中实现angular2签名板我在上面的问题上遇到错误。我正在关注本教程link。它在ionic2中运行良好，但是当我尝试使用离子3时，我会收到如下错误

Failed to navigate:  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. ("
    <ion-col></ion-col>
    <ion-col>
      <signature-pad [ERROR ->][options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signatur"): ng:///ConformsignModule/Conformsign.html@20:21
'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-col></ion-col>
    <ion-col>
      [ERROR ->]<signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplet"): ng:///ConformsignModule/Conformsign.html@20:6

您可以在此处获取完整代码，就像我只是尝试此https://devdactic.com/signature-drawpad-ionic-2/
中的所有内容一样
我认为当我使用deeplink导航时，我收到此错误但是当我将我的组件导入app.module.ts时一切正常

更新

这是我的.ts文件

export class Conformsign {

  signature = '';
  isDrawing = false;
  finalData
  @ViewChild(SignaturePad) signaturePad: SignaturePad;
  @Input()
  private signaturePadOptions: Object = { // Check out https://github.com/szimek/signature_pad
    'minWidth': 2,
    'canvasWidth': 400,
    'canvasHeight': 200,
    'backgroundColor': '#f6fbff',
    'penColor': '#666a73'
  };

  constructor(public navCtrl: NavController, public navParams: NavParams, public toastCtrl: ToastController, public holders: Holders, public rest:Rest) {

    this.finalData = this.holders.getData();
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad Conformsign');
  }

  ionViewDidEnter() {
    this.signaturePad.clear()
  }

  drawComplete() {
    this.isDrawing = false;
  }

  drawStart() {
    this.isDrawing = true;
  }

  savePad() {
    this.signature = this.signaturePad.toDataURL();
    this.signaturePad.clear();
    let toast = this.toastCtrl.create({
      message: 'New Signature saved.',
      duration: 3000
    });
    toast.present();

     let conformDelivery = {
      order_id: this.finalData.order_id,
      amountpaid:this.finalData.total,
      customername:this.finalData.firstname,
      signature:this.signature,
      user_id:this.finalData.user_id,
      customer_id:this.finalData.customer_id
    }

  }

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

}

这是我的.html

<ion-content>
  <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>

</ion-content>

Answer 1

我也面临这个问题。我通过对devdactic https://devdactic.com/signature-drawpad-ionic-2/

的原始帖子发表评论来解决这个问题

一个名叫Ka mok的家伙向我指出了一些事情

如果您在组件中使用签名板。在我的情况下，我在农民组件中使用它，该组件通常有一个farmer.module.ts文件。所以只需导入签名板模块，一切都应该正常工作

e.g

farmer.module.ts

public function index(){
    $param1 = $this->uri->segment(1); // return `param1`
    $param2 = $this->uri->segment(2); // return `param2`
    $param3 = $this->uri->segment(3); // return `param3`
    $param4 = $this->uri->segment(4); // return `param4`

    // OR
    $paramArray = $this->uri->segment_array(4); // all parameter in Array format
}

farmer.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { FarmerPage } from './farmer';
import { SignaturePadModule } from 'angular2-signaturepad';

@NgModule({
  declarations: [
    FarmerPage,
  ],
  imports: [
    IonicPageModule.forChild(FarmerPage),
    SignaturePadModule // this saved my life
  ],
})
export class FarmerPageModule {}

最后，请确保您还在app.module.ts

中导入模块

我希望这有助于某人。感谢

Answer 2

您需要将模块添加到导入

import { SignaturePadModule } from 'angular2-signaturepad';

@NgModule({
  imports: [/* BrowserModule, RouterModule.forRoot(myRoutes), ... */,
      SignaturePadModule],
  ...
})
export class AppModule {
}

其中AppModule与declarations: [...]中使用签名板的组件中包含的模块相同。

Answer 3

导入SignaturePadModule中的Confirm.module.ts，因为您使用的是离子3。

@NgModule({
    declarations: [
        ConfirmSign
    ],
    imports: [
        IonicPageModule.forChild(ConfirmSign),
        SignaturePadModule
    ],
    entryComponents: [
        ConfirmSign
    ]
})
export class ConfirmSignModule { }

无法导航：模板解析错误：无法绑定到＆＃39;选项＆＃39;因为它不是“签名垫”的已知属性。

3 个答案: