Как импортировать jQuery в проекты Angular2 Типы файлов?

Я хочу обернуть некоторый код 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. Каков следующий шаг?

Ответы

Ответ 1

Шаг 1: получите jquery в своем проекте

npm install jquery

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

npm install -D @types/jquery

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

import * as $ from 'jquery';

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

Ответ 2

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

Ответ 3

У вас должен быть 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';

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

Ответ 4

Вы также можете загрузить javascript файл jQuery в обычном теге 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");
        });
    }
}

Ответ 5

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

npm install jquery --save

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

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

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

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

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

Ответ 6

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

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

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

jQuery(document).ready({
    ()=>{
        alert("Hello!");
    };
});

Ответ 7

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

Добавить <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, функция предупреждения вызывается и выдает сообщение.