@jensen
В Angular 2, установка и использование jQuery плагинов немного отличаются от традиционного подхода.
Вот несколько шагов, которые необходимо выполнить:
- Установите jQuery и плагин, который вы хотите использовать, с помощью пакетного менеджера, такого как npm или yarn:
1
2
|
npm install jquery
npm install <имя_плагина>
|
- Импортируйте jQuery в файле компонента, где вы хотите использовать плагин:
1
|
import * as $ from 'jquery';
|
- Добавьте плагин в файл .angular-cli.json (для Angular CLI) или angular.json (для Angular 7+):
1
2
3
4
5
6
7
|
...
"scripts": [
...
"node_modules/jquery/dist/jquery.min.js",
"node_modules/<имя_плагина>/<имя_плагина>.min.js"
],
...
|
- Создайте ссылку на элемент в шаблоне компонента с помощью директивы ViewChild:
- Подключите плагин в методе ngAfterViewInit компонента:
1
2
3
4
5
6
7
8
9
10
11
12
|
import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
@Component({
...
})
export class MyComponent implements AfterViewInit {
@ViewChild('myElement') myElement: ElementRef;
ngAfterViewInit() {
$(this.myElement.nativeElement).<имя_плагина>();
}
}
|
Теперь плагин должен быть правильно подключен и использован в Angular 2.