Я использую jQuery.flowchart.js для создания некоторых диаграмм базы данных. Он работал нормально, прежде чем я добавил новую тему в свое приложение.
С новой темой я добавил несколько js внизу страницы.
На моей странице index.html плагин jquery.flowchart.js напрямую использует библиотеку jquery-ui.min.js .
Но когда я вызываю flowchart () в моем table.component.ts, он ищет потоковую диаграмму () в библиотеке vendor.bundle.base.js.
* +1012 *
Также я добавил
<script type="text/javascript">if (typeof $ !== 'undefined') {
$.noConflict();}</script>
избегайте конфликтов jquery, которые у меня не работают.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo Reports & Dashboards</title>
<!-- flowchart references -->
<link href="assets/flowchartJS/css/jquery.flowchart.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.12.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="assets/flowchartJS/js/jquery.flowchart.js"></script>
<script src="assets/flowchartJS/js/flowchart-datastructure.js"></script>
<!-- flowchart references -->
</head>
<body>
<app-root></app-root>
</body>
<script type="text/javascript">
if (typeof $ !== 'undefined') {
$.noConflict();
}
</script>
<!-- Custom js for this theme-->
<script type="text/javascript" src="assets/vendors/js/vendor.bundle.base.js"></script>
<script type="text/javascript" src="assets/vendors/js/vendor.bundle.addons.js"></script>
<script type="text/javascript" src="assets/js/template.js"></script>
<script src="assets/js/data-table.js"></script>
<!-- End custom js for this theme-->
</html>
jquet.flowchart.js
$(function ($) {
$.widget("flowchart.flowchart", {
// some code here
}
});
table.component.ts
import { queryFilter } from './../../model/queryFilter';
import { Component, OnInit, ViewChild } from '@angular/core';
import { DatasetsService } from '../datasets.service';
import { tableFilter } from 'src/app/model/tableFilter';
import { FormGroup, FormBuilder } from '@angular/forms';
$.noConflict();
declare var $: any;
declare var jQuery: any;
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss']
})
export class TableComponent implements OnInit {
ngOnInit() {
$(function () {
$('#divTableFlow').flowchart();
});
}
}