は、どのように私は私のイオニア3アプリケーションで、このNPM-パッケージを使用するイオン3

Question

におけるNG2-キャンバス、ホワイトボードを使用します。ここで

は私のpackage.jsonです：

"dependencies": { 
 
    "@angular/common": "4.0.2", 
 
    "@angular/compiler": "4.0.2", 
 
    "@angular/compiler-cli": "4.0.2", 
 
    "@angular/core": "4.0.2", 
 
    "@angular/forms": "4.0.2", 
 
    "@angular/http": "4.0.2", 
 
    "@angular/platform-browser": "4.0.2", 
 
    "@angular/platform-browser-dynamic": "4.0.2", 
 
    "@ionic-native/core": "3.4.2", 
 
    "@ionic-native/splash-screen": "3.4.2", 
 
    "@ionic-native/status-bar": "3.4.2", 
 
    "@ionic/storage": "2.0.1", 
 
    "ionic-angular": "3.1.1", 
 
    "ionicons": "3.0.0", 
 
    "ng2-canvas-whiteboard": "^1.1.1", 
 
    "rxjs": "5.1.1", 
 
    "sw-toolbox": "3.4.0", 
 
    "zone.js": "^0.8.5" 
 
    },

これは私のapp.module.tsの重要な部分である：

import { CanvasWhiteboardModule } from 'ng2-canvas-whiteboard/index'; 
 

 
@NgModule({ 
 
    declarations: [ 
 
    MyApp, 
 
    ], 
 
    imports: [ 
 
    BrowserModule, 
 
    IonicModule.forRoot(MyApp), 
 
\t FormsModule, 
 
\t HttpModule, 
 
\t CanvasWhiteboardModule, 
 
    ], 
 
    bootstrap: [IonicApp], 
 
    entryComponents: [ 
 
    MyApp, 
 
    ],

これは私俺のpage.ts：

import { Component, ElementRef, ViewChild, ViewEncapsulation } from '@angular/core'; 
 
import { NavController, IonicPage } from 'ionic-angular'; 
 
import {CanvasWhiteboardUpdate} from 'ng2-canvas-whiteboard'; 
 

 

 

 
@IonicPage() 
 
@Component({ 
 
    selector: 'page-deskriptorenanalyse', 
 
    templateUrl: 'deskriptorenanalyse.html', 
 
    encapsulation: ViewEncapsulation.None 
 
}) 
 
export class DeskriptorenanalysePage { 
 

 
    constructor(public navCtrl: NavController) 
 
    { 
 

 
    } 
 
    
 

 
    sendBatchUpdate(updates: CanvasWhiteboardUpdate[]) { 
 
    console.log(updates); 
 
    } 
 
    onCanvasClear() { 
 
    console.log("The canvas was cleared"); 
 
    } 
 
    onCanvasUndo(updateUUID: string) { 
 
    console.log(`UNDO with uuid: ${updateUUID}`); 
 
    } 
 
    onCanvasRedo(updateUUID: string) { 
 
    console.log(`REDO with uuid: ${updateUUID}`); 
 
    } 
 
    
 
}

そして、これがPage.htmlです：

<ion-header> 
 
    <ion-navbar> 
 
    <button ion-button menuToggle> 
 
     <ion-icon name="menu"></ion-icon> 
 
    </button> 
 
    <ion-title>Entwicklung der Schlüsselfaktoren</ion-title> 
 
    </ion-navbar> 
 
</ion-header> 
 

 
<ion-content padding> 
 

 

 
<div> 
 
<canvas-whiteboard #canvasWhiteboard 
 
         [drawButtonClass]="'drawButtonClass'" 
 
         [drawButtonText]="'Draw'" 
 
         [clearButtonClass]="'clearButtonClass'" 
 
         [clearButtonText]="'Clear'" 
 
         [undoButtonText]="'Undo'" 
 
         [undoButtonEnabled]="true" 
 
         [redoButtonText]="'Redo'" 
 
         [redoButtonEnabled]="true" 
 
         [colorPickerEnabled]="true" 
 
         (onBatchUpdate)="sendBatchUpdate($event)" 
 
         (onClear)="onCanvasClear()" 
 
         (onUndo)="onCanvasUndo($event)" 
 
         (onRedo)="onCanvasRedo($event)">      
 
</canvas-whiteboard> 
 
</div> 
 

 
</ion-content>

私は、私が使用するために必要なすべてを行っていると思いましたこのパッケージは、これらのエラーが発生しています：

何が間違っているのか、欠けているのか分かりますか？

Answer 1

ご覧になり、エラーメッセージをお読みください。あなたがdrawButtonClassを割り当てるか、インポートするのを忘れていることを意味

drawButtonClass 

：

はそれはありえない、以下の既知の特性をSAIS。

あなたはおそらく、その変数をpage.tsに割り当てたり、パッケージからインポートしたりします。

宣言せずに使用した他のすべてのオブジェクトにも同じことが適用されます。

Answer 2

私は、問題がどのようなものかを見るためにIonicプロジェクトを作成しました。それはあなたのイオンプロジェクトが間違って設定されているように見えます。

最初に、DeskriptorenanalysePageクラス（page.ts）にデコレータIonicPage（）があります。つまり、動作するように独自のNgModuleを持つ必要があります。

また、DeskfixorenanalysePageクラスをapp.moduleファイルに追加し、宣言とインポート配列に追加して、Angularが自分のコンポーネントであることを確認できるようにする必要があります。

また、）（@IonicPageを使用して以来、あなたは私がデモタブのプロジェクトを作成し、[ホーム]タブにキャンバスを追加したイオンディープリンクが

行うことができるように、インポートをルーティング子としてそれを登録する必要があり、それ私はイオンプロジェクトセットアップが間違っていなければならないと推測しているか、ionic serveを実行しているときにエラーが表示されていないことが考えられます。

プロジェクトのセットアップは良い

編集されていることを確認してくださいでした：DeskriptorenanalysePageのNgModuleにインポートとしてCanvasWhiteboardModuleを追加し、それがトリック

編集を行う必要があります。問題がありましたCanvasWhiteboardModuleは、LazyLoadedModulesが作成されているときに問題を引き起こしたBrowserModuleをインポートします（BrowserModuleはAppModuleに1回だけインポートする必要があるため）。

この問題は、ng2-canvas-whiteboardパッケージのバージョン1.1.2で修正されています。 package.jsonのパッケージを更新してください。問題は解決する必要があります。

このバグの発見にご協力いただきありがとうございます。