Blockly не отображается в компоненте - PullRequest
Новая
       12

Blockly не отображается в компоненте

0 голосов
/ 04 ноября 2019

При генерации компонента для блочного отображения внутри него он не отображается. Я сделал все это с помощью документации, а также пытался найти другие решения, но все еще бесполезно.

Я пытался создать контейнер в файле * .ts, а затем использовать .appendChild, я пытался использовать @ViewChild, чтобывыберите элемент шаблона, а также Renderer2.

основной шаблон 

<div class="row h-100">
   <div class="col-md-12 col-lg-6 mb-3 h-50">
     <div class="row h-50">
       <div class="col h-100">
           <app-game-wizard-points></app-game-wizard-points>
       </div>
     </div>
     <div class="row h-50">
       <div class="col h-100">
         <app-questions-list></app-questions-list>
       </div>
     </div>
   </div>
   <div class="col-md-12 col-lg-6 mb-3 h-100">
     <app-game-wizard-blockly></app-game-wizard-blockly>
   </div>
</div>

Итак, это мой blcokly.component.html 

<div id="blocklyDiv"></div>

И это некоторые последовательности из моегофайл component.ts 

ngOnInit() {

    this.workspace = Blockly.inject('blocklyDiv', {
      toolbox: `<xml>
        <category name="Logic">
          <block type="lq_if"></block>
          <block type="logic_operation"></block>
          <block type="logic_negate"></block>
        </category>
        <category name="Conditions">
          <block type="lq_time_condition"></block>
          <block type="lq_task_finished"></block>
          <block type="lq_task_finished_how"></block>
          <block type="lq_compare_variable"></block>
          <block type="lq_track"></block>
        </category>
        <category name="Actions">
          <block type="lq_show_on_map"></block>
          <block type="lq_show_in_list"></block>
          <block type="lq_activate"></block>
          <block type="lq_deactivate"></block>
          <block type="lq_finish"></block>
        </category>
        <category name="Tasks">
        <block type="lq_all_tasks"></block>
        <block type="lq_tasks_range"></block>
          ${this.wizard.points.controls.map((point, i) =>
            `<block type="lq_task_${i}"></block>`
          )}
        </category>
      </xml>`
    });

    this.workspace.toolbox_.flyout_.autoClose = false;

Выходные данные в Chrome Inspect: 

<div _ngcontent-qtd-c5="" id="blocklyDiv"></div>

Ожидаемый результат - блочное отображение в главном компоненте, где отображается несколько компонентов

...