angular - 羽毛笔错误 'quill Invalid Quill container'

Question

我正在使用 angular 4 和 quill 编辑器。但我收到了 quill Invalid Quill container 的错误消息.我更改了容器的名称，但它仍然返回错误并且无法识别容器 ID。我在 ngOninit 中创建了我的羽毛笔对象，但它不起作用!这些是我的代码:

import * as Quill from 'quill';
quill;
this.quill = new Quill('#editor-container', {
    modules: {
        toolbar: { container: '#toolbar-toolbar' }
    },
    theme: 'snow'
});

这是 HTML 文件:

<md-card>
  <div class="toolbar border-none" id="toolbar-toolbar">
    <span class="ql-formats">
      <select class="ql-size">
        <option value="small"></option>
        <option selected=""></option>
        <option value="large"></option>
        <option value="huge"></option>
      </select>
    </span>
    <span class="ql-formats">
      <button class="ql-bold"></button>
      <button class="ql-italic"></button>
      <button class="ql-underline"></button>
      <button class="ql-strike"></button>
    </span>
    <span class="ql-formats">
      <select class="ql-color"></select>
      <select class="ql-background"></select>
    </span>
    <span class="ql-formats">
      <button class="ql-list" value="ordered"></button>
      <button class="ql-list" value="bullet"></button>
      <select class="ql-align">
        <option selected=""></option>
        <option value="center"></option>
        <option value="right"></option>
        <option value="justify"></option>
      </select>
    </span>
    <span class="ql-formats">
      <button class="ql-link"></button>
    </span>
  </div>
  <hr class="ma-0">
  <div class="border-none capital" id="editor-container" #content>
    <span class="font direct"></span>
  </div>
</md-card>

Answer 1

不幸的是，我不是 Angular 专家，但我在使用 Vue.js 时遇到了完全相同的问题。
问题是 Quill 是在 DOM 容器元素正确呈现之前启动的。如果您可以确定(使用稍后的生命周期 Hook 或尝试在选项中启动工具栏，而不是在标记中)，它应该可以工作。