javascript - 如何在 Angular 6 中使用 JQuery.flowchart
问题描述
我想在角度 6中使用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 ERROR TypeError: jQuery(...).find(...).flowchart is not a function
请帮助我如何在 Angular 中使用 JQuery 小部件。我试过draggable,它工作正常。
<div class="moving-box">Hellooo moveing</div>
$(this.el.nativeElement).find('.moving-box').draggable({containment: '#draggable-parent'});
解决方案
在此处输入图像描述 将所有 ngAfterViewInit 放在 setTimeout 中几秒钟。它帮助了我。
推荐阅读
- node.js - 发回带有状态码和数据的 http 请求
- google-sheets - 如何向谷歌表格添加文本和两个计数语句?
- go - protoc-gen-gogo - `gogoproto.customname` 替代品
- json - 根据 React FlatList 中的索引返回 JSON 数据
- sockets - TCP 套接字服务器到 websockets 服务器
- browser - 在浏览器中实现 RDP
- flutter - SliverList setState 仅影响选定的项目颤振
- python - 如何从以下 for 循环中打印变量?
- blazor - 在 Blazorise Datagrid 中显示图像
- java - 在 Fujitsu XWAND 中生成 iXBRL 后出现未知命名空间前缀