如何在角6中使用JQuery.flowchart

Question

我想在第六角使用JQuery.flowchart。

我刚刚创建了一个简单的代码，如下所示。

HTML(app.component.html)

 <div class="container">
  <h1>jQuery flowchart.js Example</h1>
  <div class="demo" id="example" class="example"></div>
  <button class="btn btn-primary" id="create_operator">Create A New Operator</button>
  <button class="btn btn-danger" id="delete_selected_button">Delete Selected Operator</button>
 </div>

和组件(app.component.ts)

import { Component, OnInit, ElementRef } from '@angular/core';
declare var jQuery: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private el: ElementRef) {
  }

  ngOnInit(): void {

  }


  // tslint:disable-next-line:use-life-cycle-interface
  ngAfterViewInit() {
    const data = {
      operators: {
        operator1: {
          top: 20,
          left: 20,
          properties: {
            title: 'Operator 1',
            inputs: {},
            outputs: {
              output_1: {
                label: 'Output 1',
              }
            }
          }
        },
        operator2: {
          top: 80,
          left: 300,
          properties: {
            title: 'Operator 2',
            inputs: {
              input_1: {
                label: 'Input 1',
              },
              input_2: {
                label: 'Input 2',
              },
            },
            outputs: {}
          }
        },
      }
    };

    $(this.el.nativeElement).find('.example').flowchart({
      data: data
    });

    // Apply the plugin on a standard, empty div...
    // $('#example').flowchart({
    //   data: data
    // });



    let operatorI = 0;
    $('#create_operator').click(() => {
      const operatorId = 'created_operator_' + operatorI;
      const operatorData = {
        top: 60,
        left: 500,
        properties: {
          title: 'Operator ' + (operatorI + 3),
          inputs: {
            input_1: {
              label: 'Input 1',
            }
          },
          outputs: {
            output_1: {
              label: 'Output 1',
            }
          }
        }
      };

      operatorI++;

      $(this.el.nativeElement).find('.example').flowchart('createOperator', operatorId, operatorData);
    });

    $('#delete_selected_button').click(() => {
      $(this.el.nativeElement).find('.example').flowchart('deleteSelected');
    });
  }
}

我安装了插件和package.json

"jquery": "^3.3.1",
"jquery-ui-dist": "^1.12.1",
"jquery.flowchart": "^1.1.0",

在angular.json中

 "scripts": [ 
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/jquery-ui-dist/jquery-ui.js",
              "./node_modules/jquery.flowchart/jquery.flowchart.js" ]
          },

在tsconfig.app.json中

"types": [
      "jquery"
    ]

流程图给了我一个错误

AppComponent_Host.ngfactory.js？sm:1错误TypeError: jQuery(.).find(.).flowchart不是函数

请帮助我如何使用JQuery小部件的角度。我试过拖拉，效果很好。

<div class="moving-box">Hellooo moveing</div>
$(this.el.nativeElement).find('.moving-box').draggable({containment: '#draggable-parent'});

Answer 1

在这里输入图像描述将ngAfterViewInit在setTimeout中的所有内容放置几秒钟。这对我有帮助。