我正在尝试将 Jquery Combo-Tree 插件集成到 Angular 6 应用程序中

Question

我遇到了这个错误。"Error: $(...).comboTree is not a function"

我已经安装了jquery,@types/jquery.
添加 comboTree.js 插件和 icontainer.js。

Stackblitz Url:

https://stackblitz.com/edit/angular-pg3hjd

这是我的代码

app.component.ts

import { Component,OnInit } from '@angular/core';
import  $ from 'jquery';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

    ngOnInit() {
// SampleJSONData Be the Json with tree structure

var comboTree1, comboTree2;

$(document).ready(function($) {
 
 comboTree2 = $('#justAnotherInputBox').comboTree({
   source : SampleJSONData,
   isMultiple: false
  });
});
  }
}

<div class="row">
  <div class="col-lg-6">
   <h3>Single Selection</h3>
   <input type="text" id="justAnotherInputBox" placeholder="Type to filter"/>
  </div>

 </div>

Answer 1

comboTree 是 jQuery 的插件。你也需要安装它。从他们的 github 下载 comboTreePlugin.js 并将其添加到您的项目中。然后你的 app.component.ts 在导入 jquery 之后导入它。

import { Component, OnInit } from '@angular/core';
import  $ from 'jquery';
import '../comboTreePlugin';  // enter proper path here, depending where you saved the plugin in your project.

... rest of your code ...

现在打开 comboTreePlugin.js 并导入 jquery：

import jQuery from 'jquery';

但是编辑供应商包以在其中导入 jquery 不是您应该做的事情。解决这个问题更优雅的方法是：

创建一个名为 'globals.js' 的文件（或任何你想命名的文件）

里面这样写：

import jquery from 'jquery';

window.$ = jquery;
window.jQuery = jquery;

现在在您的 app.component.ts 中，您的导入应该如下所示：

import { Component,OnInit } from '@angular/core';
import './globals';
import '../comboTreePlugin';

... rest of your code ...

现在应该可以使用了，不需要在 comboTreePlugin.js
中编辑任何东西
现在无需在您的组件中导入 jquery，因为导入全局变量会将 $ 和 jQuery 都引入范围。

Stackblitz：
https://stackblitz.com/edit/angular-qswozq
https://angular-qswozq.stackblitz.io

我正在尝试将 Jquery Combo-Tree 插件集成到 Angular 6 应用程序中

I am trying to integrate Jquery Combo-Tree Plugin into a Angular 6 Application

jquery-plugins

angular6