Как импортировать jQuery в проекты Angular2 TypeScript?

Я хочу обернуть некоторый код jQuery в директиву Angular2.

Я установил библиотеку jQuery для типизации в свой проект с помощью следующей команды:

typings install dt~jquery --save --global

Итак, теперь у меня есть папка jquery в папке typings/global в каталоге моего проекта. Кроме того, в мой файл typings.json добавлена ​​следующая новая строка:

{
    "globalDependencies": {
        "core-js": "registry:dt/core-js#0.0.0+20160602141332",
        "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
        "node": "registry:dt/node#6.0.0+20160807145350",
        "jquery": "registry:dt/jquery#1.10.0+20160908203239"
    }
}

Я начал писать новую директиву Angular2 (которую я импортировал в файл app-module), но я не знаю, как правильно импортировать библиотеку jQuery. Вот мой исходный файл:

import {Directive} from '@angular/core';

@Directive({
    selector: "my-first-directive"
})

export class MyFirstDirective {
    constructor() {
        $(document).ready(function () {
            alert("Hello World");
        });
    }
}

Но я не могу использовать ни $, ни jQuery. Каким будет следующий шаг?


typescript angular jquery typescript-typings angular2-directives
person smartmouse    schedule 15.09.2016    source источник
comment
angular уже предоставляет базовые функции jquery вместо импорта jquery, поскольку это вызовет проблемы в долгосрочной перспективе.   -  person Atal Kishore    schedule 15.09.2016
comment
Как это использовать? Например, я бы использовал метод .dropdown()...   -  person smartmouse    schedule 15.09.2016
comment
Я не знаю об этой конкретной функции.   -  person rinukkusu    schedule 15.09.2016
comment
Хорошо, как я могу использовать встроенную библиотеку jQuery?   -  person smartmouse    schedule 15.09.2016
comment
.dropdown() не является функцией jquery. Вы используете bootstrap.js? Если вы используете его, вам нужно использовать jquery или просто переключиться на ng-bootstrap, который является начальной загрузкой, написанной для angular командой angular search google.   -  person Atal Kishore    schedule 15.09.2016
comment
Я вижу это отсюда: plnkr.co/edit/MMNWGh. Это плагин jQuery.   -  person smartmouse    schedule 15.09.2016
comment
Выполните следующие простые шаги здесь: stackoverflow.com/a/42295505/7532440   -  person AmanDeepSharma    schedule 10.03.2017

Ответы (7)


arrow_upward
26
arrow_downward

Шаг 1. Включите jquery в свой проект

npm install jquery

Шаг 2. Добавьте тип для jquery

npm install -D @types/jquery

Шаг 3. Используйте его в своем компоненте!

import * as $ from 'jquery';

Готов к использованию $!

person Chinmay    schedule 12.04.2017
comment
Да, но нет интеллисенса ;( - person SharpNoiZy; 05.07.2017
comment
@SharpNoiZy Я сделал это, и у меня есть IntelliSense. Однако вам нужно добавить jquery в массив типов в tsconfig.json. - person karoluS; 24.07.2018

arrow_upward
4
arrow_downward

Если вы используете «@angular/cli», установите:

npm install jquery --save

Установка второго шага:

install: npm install @types/jquery --save-dev

И найдите имя своего файла в «angular-cli.json» в корне и добавьте его внутри:

script:["../node_modules/jquery/dist/jquery.min.js"]

Теперь это сработает.

person Sheo Sagar    schedule 07.09.2017
comment
Вы также должны убедиться, что импортируете в компонент, используйте: import * as $ from "jquery"; - person Daniel Bailey; 03.10.2018
comment
Нет очевидной необходимости.. если вы работаете с магистралью, вам может понадобиться import * as $ from 'backbone'; - person Kubadev; 28.01.2020

arrow_upward
3
arrow_downward

jQuery.service.ts

 import { OpaqueToken } from '@angular/core'
export let JQ_TOKEN = new OpaqueToken('jQuery');

index.ts`

export * from './jQuery.service';

app.module.ts

declare let jQuery : Object;

@NgModule({
  providers: [
    { provide: TOASTR_TOKEN, useValue: toastr },
    { provide: JQ_TOKEN, useValue: jQuery },
})
export class AppModule { }

как использовать Jquery в компоненте

   import { Component, Input, ViewChild, ElementRef, Inject } from '@angular/core'
import { JQ_TOKEN } from './jQuery.service'

@Component({
  selector: 'simple-modal',
  template: `
  <div id="{{elementId}}" #modalcontainer class="modal fade" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
          <h4 class="modal-title">{{title}}</h4>
        </div>
        <div class="modal-body" (click)="closeModal()">
          <ng-content></ng-content>
        </div>
      </div>
    </div>
  </div>
  `,
  styles: [`
    .modal-body { height: 250px; overflow-y: scroll; }
  `]
})
export class SimpleModalComponent {
  @Input() title: string;
  @Input() elementId: string;
  @Input() closeOnBodyClick: string;
  @ViewChild('modalcontainer') containerEl: ElementRef;

  constructor(@Inject(JQ_TOKEN) private $: any) {}

  closeModal() {
    if(this.closeOnBodyClick.toLocaleLowerCase() === "true") {
      this.$(this.containerEl.nativeElement).modal('hide');
    }
  }
}
person user1089766    schedule 04.02.2017
comment
Однако OpaqueToken устарел, но вы можете просто изменить его с помощью InjectionToken, как описано здесь thecodegarden.net/ - person Jeffrey Rosselle; 16.05.2017

arrow_upward
2
arrow_downward

Вы также можете загрузить свой файл jQuery Javascript в обычный тег script в разделе head вашего index.html.

<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js" />

        ...
    </head>
    ...

Затем в компоненте или директиве, где вам это нужно, просто объявите переменную $, необходимую для jQuery, так как у вас не будет типов для всех необходимых вам плагинов:

import {Directive} from '@angular/core';

declare var $: any;

@Directive({
    selector: "my-first-directive"
})

export class MyFirstDirective {
    constructor() {
        $(document).ready(function () {
            alert("Hello World");
        });
    }
}
person rinukkusu    schedule 15.09.2016
comment
Должен ли я написать следующую строку в файле systemjs.config.js}? 'jquery': 'typings/global/jquery/index.d.ts' - person smartmouse; 15.09.2016
comment
Нет, в конфиге SystemJS ничего писать не надо. Просто добавьте тег <script> в ваш index.html, где вы загружаете jquery.js. Затем добавьте ссылку на компоненты или директивы, где вам это нужно. - person rinukkusu; 15.09.2016
comment
Извините, боюсь, я не понимаю, как это работает. Можете ли вы показать мне пример или код? - person smartmouse; 15.09.2016
comment
Спасибо. Впервые вижу этот тег reference... зачем он вам? Почему в других ответах говорится о файле systemjs.config.js? - person smartmouse; 15.09.2016
comment
Пожалуйста, взгляните на это: plnkr.co/edit/MMNWGh. Здесь он может использовать jQuery и даже плагин jQuery (раскрывающийся список) без тега ссылки. Как это работает в таком случае? И почему в этом примере используется другой способ переноса некоторого кода jQuery? - person smartmouse; 15.09.2016
comment
это олдскульный способ сделать это. - person vidalsasoon; 15.09.2016
comment
Вы можете сделать то же самое таким образом - я обновлю свой ответ на ваш запрос на плагин. - person rinukkusu; 15.09.2016
comment
Не буду врать — эта версия использования внешних файлов JS избавит вас от головной боли с SystemJS или любым другим инструментом упаковки. - person rinukkusu; 15.09.2016

arrow_upward
1
arrow_downward

У вас должен быть файл typings.json, который указывает на ваш файл ввода jquery. Затем:

systemjs.config (настройка карты уведомлений для jquery)

System.config({
    defaultJSExtensions: true,
    paths: {
        // paths serve as alias
        'npm:': 'node_modules/'
    },
    map: {
        'app':  'app',
        jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js',
        material: 'npm:material-design-lite/dist/material.min.js',

        // angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        ....
    },
    packages: {
        app: { main: 'main', format: 'register', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' }
    },
});

В компоненте:

import $ from 'jquery';

Затем используйте $ как обычно.

person vidalsasoon    schedule 15.09.2016
comment
Так мне не нужно было устанавливать jQuery с установкой tyipings? Что я должен записать как путь в объекте карты файла systemjs.config.js? - person smartmouse; 15.09.2016
comment
вам нужны типизации, если вы собираетесь использовать import $ from 'jquery';. Если вам не нужно объявлять переменную '$' с любым типом, иначе машинописный текст жалуется на неправильный тип - person vidalsasoon; 15.09.2016
comment
Если я импортирую с тегом scripts html, я не могу использовать jQuery для написания кода в моих директивах/компонентах Angular2. - person smartmouse; 15.09.2016
comment
не импортируйте с тегом scripts. пусть typescript и systemjs сделают это за вас и сделают это так же, как это делает angular 2. - person vidalsasoon; 15.09.2016
comment
Итак, я добавляю следующую строку в свой файл systemjs.config.js: 'jquery': 'node_modules/jquery/dist/jquery.min.js'. Как я понял, это работает, потому что я устанавливаю соответствующий файл определения типизации. Итак, теперь я добавляю следующую строку в свою директиву/компонент: import * as $ from 'jquery';. Это правильный путь? - person smartmouse; 15.09.2016
comment
начните с импорта $ из jquery; и вы должны увидеть, как работает intellisense. Сначала проверьте это. - person vidalsasoon; 15.09.2016
comment
Если я использую import $ from 'jquery' вместо import * as $ from 'jquery', я получаю эту ошибку в своей IDE (Atom): Module "'jquery'" has no default export. - person smartmouse; 15.09.2016
comment
поиск решения для объявления модуля jquery. В вашем файле типизации должно быть это. - person vidalsasoon; 15.09.2016
comment
Почему import * as $ from 'jquery' работает? В любом случае, как заставить его работать даже с плагином dropdown jQuery? - person smartmouse; 15.09.2016
comment
Решено после установки. npm установить @types/jquery --save - person roshini; 30.03.2017

arrow_upward
0
arrow_downward

Я не думаю, что использование jquery с angular 2 должно быть проблемой. Если типы и зависимости для jquery установлены правильно, то использование jquery в angular 2 не должно быть проблемой.

Я смог использовать jquery в своем проекте angular 2 с правильной установкой. И под правильной установкой я подразумеваю установку типизации jquery, чтобы распознать ее в машинописном тексте.

После этого я смог использовать jquery следующим образом:

jQuery(document).ready({
    ()=>{
        alert("Hello!");
    };
});
person Abhinandan    schedule 15.09.2016

arrow_upward
0
arrow_downward

Это старый вопрос, и уже есть некоторые ответы. Однако существующие ответы слишком сложны (ответ пользователя 1089766 содержит много ненужного). Надеюсь, это поможет кому-то новому.

Добавьте <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> в свой файл index.html.

Создайте jQuery.Service.ts:

import {InjectionToken} from "@angular/core";
export let jQueryToken = new InjectionToken('jQuery');

В файле вашего модуля добавьте этот jQueryToken к провайдеру:

providers:[
{
    provide: jQueryToken,
    useValue: jQuery

}]

Теперь @Inject(jQueryToken) и он готов к использованию. Допустим, вы хотите использовать внутри компонента имя ExperimentComponent, тогда:

import {Component, Inject, OnInit} from '@angular/core';
import {jQueryToken} from "./common/jquery.service";

@Component({
    selector: 'app-experiment',
    templateUrl: './experiment.component.html',
    styleUrls: ['./experiment.component.css']
})
export class ExperimentComponent implements OnInit {

    constructor(@Inject(jQueryToken) private $: any) {
        $(document).ready(function () {
            alert(' jQuery is working');
        });
    }

    ngOnInit() {
    }

}

Всякий раз, когда вы открываете ExperimentComponent, функция оповещения будет вызываться и отображать всплывающее сообщение.

person V.Tran    schedule 10.08.2017