[ng2-canvas-whiteboard在Angular7.3.5中不起作用

问题描述 投票:0回答:1

我按照说明安装ng2-canvas-whiteboard软件包,但是页面空白。这是我所做的:

IN模块:

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

@NgModule({
    imports: [
        CanvasWhiteboardModule,
]

在组件中:

import { CanvasWhiteboardComponent, CanvasWhiteboardOptions, CanvasWhiteboardUpdate } from 'ng2-canvas-whiteboard';


 viewProviders: [CanvasWhiteboardComponent],
@ViewChild('canvasWhiteboard') canvasWhiteboard: CanvasWhiteboardComponent;

public canvasOptions: CanvasWhiteboardOptions;

ngOnInit() {
            this.canvasOptions = {
                drawButtonEnabled: true,
                drawButtonClass: "drawButtonClass",
                drawButtonText: "Draw",
                clearButtonEnabled: true,
                clearButtonClass: "clearButtonClass",
                clearButtonText: "Clear",
                undoButtonText: "Undo",
                undoButtonEnabled: true,
                redoButtonText: "Redo",
                redoButtonEnabled: true,
                colorPickerEnabled: true,
                saveDataButtonEnabled: true,
                saveDataButtonText: "Save",
                lineWidth: 5,
                strokeColor: "rgb(0,0,0)",
                shouldDownloadDrawing: true
              };
        }
  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}`);
  }

在HTML中:

<div style="height: 400px; border: 1px solid black">
        <canvas-whiteboard #canvasWhiteboard
                           [options]="canvasOptions"
                           (onBatchUpdate)="onCanvasDraw($event)"
                           (onClear)="onCanvasClear()"
                           (onUndo)="onCanvasUndo($event)"
                           (onRedo)="onCanvasRedo($event)">
        </canvas-whiteboard>
      </div>
html5-canvas angular7 whiteboard
1个回答
0
投票

在添加模块代码之前,我一直遇到相同的问题`从'ng2-canvas-whiteboard'导入{CanvasWhiteboardModule};

 @NgModule({
     imports: [
         CanvasWhiteboardModule,
 ]`

到“ SPECIFIC”页面的模块文件-不仅在app.module.ts文件中。

即它也必须在your-page-name.module.ts中。

© www.soinside.com 2019 - 2024. All rights reserved.