Question

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

该指南指出，要使用此模块，您必须将 SignaturePadModule 添加到 app.module.ts的 imports 部分。但是，我们的项目（使用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 和模板文件，以显示模块：

＆＃13;

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;
    }`

＆＃13;

并将以下内容添加到模板

中

＆＃13;

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

＆＃13;

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

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

Answer 1

解决了这个问题;我工作的项目最初是在Ionic 2仍处于测试阶段时创建的，因此，各种组件已经发展，例如ionicBoostrap，不再用于候选版本。

我通过添加

解决了这个问题

directives: [SignaturePad]

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

添加第三方模块（angular2-signaturepad），不带app.module.ts（Angular 2 / Ionic 2）

1 个答案: