添加不带 app.module.ts (Angular 2 / Ionic 2) 的第三方模块 (angular2-signaturepad)

Question

我在使用名为 angular2-signaturepad 的第三方模块时遇到了一些问题。 使用这个 guide

指南指出，为了使用此模块，您必须将 SignaturePadModule 添加到 的 imports 部分]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>

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

这里的任何想法都会有所帮助，提前致谢

Answer 1

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

我通过添加

解决了这个问题

directives: [SignaturePad]

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

添加不带 app.module.ts (Angular 2 / Ionic 2) 的第三方模块 (angular2-signaturepad)

Add a third-party module (angular2-signaturepad) without app.module.ts (Angular 2 / Ionic 2)

ionic-framework

signaturepad

ionic2

angular