javascript - 如何在 Angular 6 中使用 JQuery.flowchart

Question

我想使用JQuery.flowchart Angular 为 6。

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

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 ERROR TypeError: jQuery(...).find(...).flowchart is not a function

请帮助我如何在 Angular 中使用 JQuery 小部件。我尝试了可拖动并且工作正常。

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

Answer 1

enter image description here将所有 ngAfterViewInit 放入 setTimeout 中几秒钟。它帮助了我。