Я пытаюсь интегрировать плагин Jquery Combo-Tree в приложение Angular 6

Question

Я сталкиваюсь с этой ошибкой. "Ошибка: $ (...). ComboTree не является функцией"

Я установил jquery, @ types / jquery.
Добавьте плагин comboTree.js иicontainer.js.

URL-адрес 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.Вы должны установить это тоже.Загрузите comboTreePlugin.js с их github и добавьте его в свой проект.Затем ваш 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 - это не то, что вам следует делать.Более элегантный способ решения этой проблемы:

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