KEYBOARD_DOM_ERROR

Question

我正在尝试在我的 angular 应用程序中创建一个虚拟键盘，我发现了 Simple-keyboard 包，所以我决定安装它并对其进行自定义，但是我遇到了一些错误，例如 .simple-keyboard" 未在 DOM. 中找到，这是什么问题？有人可以帮助我吗？

我正在使用 angular 11.2.8

Answer 1

在您的 html 文件中添加以下代码

  <div class="simple-keyboard"></div>

Answer 2

我在 Angular 8 中使用这个包，不确定这是否有帮助。

当我安装并按照 Angular example, I saw KEYBOARD_DOM_ERROR in my console either, then I found the solution for me which this issue 回答的步骤进行操作时。

KEYBOARD_DOM_ERROR means that <div class="simple-keyboard"></div> was not found in the dom at instantiation.

并且我尝试在 .ts 文件中创建一个元素，而不是仅仅添加到模板中，就像问题所说的那样。

// component.ts
// you can add other className to make keyboard display:none first

ngOnInit(): void {
  const div = document.createElement('div');
  div.className += "simple-keyboard";
  document.body.appendChild(div);
}

<!-- component.html -->
<!-- just want to remind you need to delete it -->

<!-- <div class="simple-keyboard"></div> -->

经过这两件事，我的错误消失了，我可以做接下来需要做的事情了。

Answer 3

确保您的 html 有 div 和 simple-keyboard class（或您为键盘指定的任何名称）。

如果错误不断发生，请尝试在初始化视图后创建键盘实例：

ngAfterViewInit() {
  this.keyboard = new Keyboard(".simple-keyboard",{
    onChange: input => this.onChange(input),
    onKeyPress: button => this.onKeyPress(button)
  });
}