1

我在使用名为angular2-signaturepad的第三方模块时遇到了一些麻烦。使用本指南

该指南指出，为了使用此模块，您必须将SignaturePadModule添加到app.module.ts的导入部分。但是，我们的项目（使用 Ionic 2）没有或不使用app.module.ts文件。我们所有的依赖项都存在于我们的app.ts中，特别是我们的ionicBootstrap函数

由于我们没有app.module.ts文件，我决定将SignaturePadModule添加到app.ts

ionicBootstrap(MyApp, [ disableDeprecatedForms(), provideForms(), DataService, UploadService, StorageService, ConnectionService, HTTP_PROVIDERS, ActionSheetController, AlertController, Device, Diagnostic, LoggingService, SettingsService, SnaggingService, **SignaturePadModule**, provide('Storage', { useClass: Storage })] );

我为我的页面创建了一个新的ts和模板文件来显示模块：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, NavParams, ActionSheetController, ToastController, PopoverController, ViewController } from 'ionic-angular';
import { Toast, Camera, DatePicker } from 'ionic-native';

import { DataService } from '../../services/data.service';
import { SnaggingService } from '../../services/snagging.service';
import { StorageService } from '../../services/storage.service';

import { SignaturePad } from 'angular2-signaturepad/signature-pad';

@Component({
    templateUrl: 'build/pages/test-signature/signatures.html',
})

export class SignaturesPage {

    signature = "";
    isDrawing = false;

    @ViewChild(SignaturePad) signaturePad: SignaturePad;
    private signaturePadOptions: Object = { // passed through to szimek/signature_pad constructor
        'minWidth': 5,
        'canvasWidth': 500,
        'canvasHeight': 300
    };

    constructor(public navCtrl: NavController) {

    }

    drawComplete() {
        this.isDrawing = false;
    }

    drawStart() {
        this.isDrawing = true;
    }`

并将以下内容添加到模板中

<ion-header>
  <ion-toolbar>
    <ion-navbar>
      <ion-title>
        Signatures
      </ion-title>
    </ion-navbar>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  Please provide a signature please
  <signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>
  <canvas id="" width="300" height="200"></canvas>
</ion-content>

我的应用程序启动并成功部署到我的设备，但是当我浏览到有问题的页面时，没有显示任何画布或任何内容。我在开发者工具上没有收到任何错误，我可以再次使用开发者工具看到 HTML，但我不知道如何解决这个问题

这里的任何想法都会有所帮助，在此先感谢

4

1 回答 1

0

解决了问题；我正在从事的项目最初是在 Ionic 2 仍处于 beta 阶段时创建的，因此，各种组件已经转移，例如 ionicBoostrap，它不再在候选版本中使用。

我通过添加解决了这个问题

directives: [SignaturePad]

到组件装饰器。添加这一行并重新部署后，我能够在屏幕上绘图。

于 2017-01-12T15:30:12.150 回答