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

Question

我按照安装 ng2-canvas-whiteboard 包的说明进行操作，但我有一个空白页。这是我所做的：

输入模块：

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>

Answer 1

在添加模块代码 `import { CanvasWhiteboardModule } from 'ng2-canvas-whiteboard' 之前，我遇到了同样的问题；

 @NgModule({
     imports: [
         CanvasWhiteboardModule,
 ]`

到特定页面的模块文件 - 不仅仅是在 app.module.ts 文件中。

IE 它也需要在 your-page-name.module.ts 中