1

angular2-signaturepadというサードパーティ モジュールの使用に問題があります。このガイドの使用

ガイドには、このモジュールを使用するには、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ファイルとテンプレートファイルを作成しました。

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