Не удалось перейти: ошибки синтаксического анализа шаблона: невозможно связать с "параметрами", поскольку оно не является известным свойством "signature-pad"

Я пытаюсь внедрить блок подписи angular2 в мой проект ionic 3, я получаю сообщение об ошибке, как указано выше. Я иду по этой ссылке учебника. Он отлично работает в ionic2, но когда я пытаюсь в ionic 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 Navigation, я получаю эту ошибку, но когда я импортирую свой компонент в 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>
Источник

3 ответа

Я тоже столкнулся с этой проблемой. Я решил эту проблему, просмотрев комментарии к исходному сообщению от devdactic https://devdactic.com/signature-drawpad-ionic-2/

Парень по имени Ка Мок указал мне на что-то

Если вы используете панель подписи в компоненте. в моем случае я использую его в компоненте фермеров, компонент обычно имеет файл farmer.module.ts. Так что просто импортируйте модуль панели подписи и все должно работать нормально

например

farmer.module.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 {}

farmer.ts

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { SignaturePad } from 'angular2-signaturepad/signature-pad';
import { NativeStorage } from '@ionic-native/native-storage';
import { ToastController } from 'ionic-angular';

Наконец, убедитесь, что вы также импортируете модуль в app.module.ts

Я надеюсь, что это помогает кому-то. Спасибо

Источник

Импортировать SignaturePadModule в Confirm.module.ts так как вы используете ионный 3.

@NgModule({
    declarations: [
        ConfirmSign
    ],
    imports: [
        IonicPageModule.forChild(ConfirmSign),
        SignaturePadModule
    ],
    entryComponents: [
        ConfirmSign
    ]
})
export class ConfirmSignModule { }
Источник

Вам нужно добавить модуль в импорт

import { SignaturePadModule } from 'angular2-signaturepad';

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

где AppModule это тот же модуль, который также содержит в declarations: [...] компонент, в котором вы используете панель подписи.

Источник
Другие вопросы по тегам