Question

我想在我的Ionic 3 App中使用这个npm-package：

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

我创建了一个离子项目，看看问题可能是什么，从它的外观来看，你的离子项目似乎设置错了。

首先，您的DeskriptorenanalysePage类（page.ts）具有装饰器IonicPage（），这意味着它还需要拥有它自己的NgModule以便它可以工作。

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

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

我创建了一个演示标签项目，并将画布添加到主页选项卡，它似乎正在工作，所以我推测离子项目设置必定是错误的，或者你可能没有看到运行离子服务时显示的错误（如果有任何）。

请您确认项目设置是否正常

编辑：请在DeskriptorenanalysePage的NgModule中添加CanvasWhiteboardModule作为导入，它应该可以解决这个问题

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

此问题已在ng2-canvas-whiteboard软件包的1.1.2版中修复。请更新package.json中的软件包，问题应解决

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

如何在离子3中使用ng2-canvas-whiteboard

2 个答案: