我试图jQuery的组合树插件集成到角6应用

Question

我面对这样的错误。“错误：$（...）comboTree不是一个函数”。

我已经安装了jQuery，@类型/ jQuery的。 添加comboTree.js插件和icontainer.js。

Stackblitz网址：

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';

---

But editing vendor packages to import jquery in it is not something you should do. More elegant way to solve this problem is to:

1. 创建一个名为“globals.js”文件（或任何你想它命名为）
2. 在写本：

   import jquery from 'jquery';
   
   window.$ = jquery;
   window.jQuery = jquery;

3. 现在，在您app.component.ts的进口应该是这样的：

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

4. 应该现在的工作，无需编辑comboTreePlugin.js什么 无需现在在你的组件导入的jQuery作为进口全局把两种$和jQuery到范围。

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