我想在我的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>
我认为我已经完成了使用此软件包所需的一切,但是这些错误正在发生:
你能说出我做错了什么或错过了什么吗?
答案 0 :(得分:0)
查看并阅读您的错误消息。
以下不是已知的财产:
drawButtonClass
这意味着您忘记分配或导入drawButtonClass。
你可能会在page.ts中分配该变量,或者从包中导入它。
这同样适用于您使用的所有其他对象而不声明它们。
答案 1 :(得分:0)
我创建了一个离子项目,看看问题可能是什么,从它的外观来看,你的离子项目似乎设置错了。
首先,您的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中的软件包,问题应解决
很抱歉给您带来不便,感谢您帮助发现此错误。