Question

我正在使用jQuery.flowchart.js绘制一些数据库图。在我向应用程序添加新主题之前，它运行良好。使用新主题，我在页面底部添加了一些js。

在我的index.html页面中， jquery.flowchart.js 插件直接使用 jquery-ui.min.js 库。

但是当我在table.component.ts中调用 flowchart（）时，它是在vendor.bundle.base.js库中查找流程图（）。

我还添加了

<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 &amp; 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();
        });
      }
    }

Angular 7中的Jquery插件冲突

0 个答案: