如何在 ionic 3 中使用 ng2-canvas-whiteboard

Question

我想在我的 Ionic 3 应用程序中使用这个 npm 包：

https://www.npmjs.com/package/ng2-canvas-whiteboard

我做了这个链接中所说的一切。

这是我的 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),
	  FormsModule,
	  HttpModule,
	  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。

您可能应该在 page.ts 中分配该变量或从包中导入它。

这同样适用于您使用但未声明它们的所有其他对象。

Answer 2

我创建了一个 Ionic 项目来查看问题可能是什么，从它的外观看来，您的 ionic 项目可能设置错误。

首先，DeskriptorenanalysePage 类（page.ts）有装饰器 IonicPage()，这意味着它还需要有自己的 NgModule 才能工作。

此外，您的DeskriptorenanalysePage 类需要添加到app.module 文件中，并添加到声明和导入数组中，以便Angular 可以看到它是您自己的组件。

此外，由于使用@IonicPage()，您需要将其注册为子路由导入，以便可以进行离子深度链接

我创建了一个演示选项卡项目并将画布添加到主页选项卡，它似乎正在工作，所以我推测 Ionic 项目设置一定是错误的，或者您在运行 ionic serve 时没有看到显示的错误（如果有）。

能否请您确认项目设置是否良好

编辑：请将 CanvasWhiteboardModule 作为导入添加到 DeskriptorenanalysisPage 的 NgModule 中，它应该可以解决问题

编辑：CanvasWhiteboardModule 导入 BrowserModule 时出现问题，导致在创建 LazyLoadedModules 时出现问题（因为 BrowserModule 只能在 AppModule 中导入一次）。

这个问题在 ng2-canvas-whiteboard 包的 1.1.2 版本中得到修复。请更新 package.json 中的包，问题应该得到解决

很抱歉给您带来不便，并感谢您帮助发现此错误。