Ответ 1

По-моему: если вы сделаете это правильно, и если вы сохраните его минимально, вы должны пойти с этим.

• Установить jQuery. Типичные значения в проекте: tsd install jQuery
• Загрузите jQuery с тегом script (или другими загрузчиками...)
• Оберните любой плагин jQuery с директивой Angular 2

Пример:

@Directive({
  selector: "[sm-dropdown]"
})
export class SMDropdown {
  constructor(el: ElementRef) {
    jQuery(el.nativeElement).dropdown();
  }
}

Рассмотрим этот Plunker:

https://plnkr.co/edit/MMNWGh?p=preview

Не

• Не используйте его для манипуляций с DOM, существует Angular способ...
• Не используйте его для вызовов AJAX, есть Angular способ...
• Не используйте его для анимации, ngAnimation подходит...

Ответ 2

Когда у вас установлена ​​библиотека JQuery typescript, укажите ее таким образом

///<reference path="../typings/jquery/jquery.d.ts" />

Затем сделайте необходимые импорт

import {Component, AfterViewInit} from 'angular2/core';

Теперь напишите класс

@Component({
  selector: 'my-app',
  templateUrl: 'app/html/app.component.html'
})

export class AppComponent implements AfterViewInit {
  ngAfterViewInit() {
    // Your jQuery code goes here
    $('#here').text("HALLO! ^_^");
  }
}

Ответ 3

Что я делаю для решения этой проблемы:

Для библиотеки не поддерживается @types/, и библиотека должна загружаться при загрузке документа (средние библиотеки должны добавлять в тег script документа)

• Выполнить npm install jquery --save

• Добавьте файлы js/css в scripts или styles из angular-cli.json, например

  "scripts": ["../node_modules/path to file", "./assets/path to file"]

Для поддерживаемой библиотеки @types/ просто запустите npm install @types/jquery --save-dev

Чтобы использовать библиотеку, добавьте declare var jQuery: any; перед аннотацией @Directive или @Component, чтобы использовать lib

P/S: я использую angular-cli с webpack в моем проекте, возможно, отличается от systemjs

Ответ 4

Вы должны указать, где вы можете найти определение jQuery typeScript. Это можно сделать в файле typings.d.ts, где вы помещаете свои типизации следующим образом:

///<reference path="../typings/jquery/jquery.d.ts" />

Или вы можете установить типизацию с помощью node и позволить вашей конфигурации загружать ее автоматически. Это то, что angular -cli.

После этого, чтобы использовать jQuery с Angular2, вы должны понимать фундаментальный механизм. Angular2 имеет собственное представление dom, а jQuery управляет этим dom. Вот почему люди говорят: "Не используйте jQuery с Angular2". Это неправильно. Angular2 поставляется с решением этой проблемы. Он называет это ControlValueAccessor. Цель этого - предупредить angular, когда ваш плагин jQuery изменяет DOM, а также пусть angular уведомляет ваш плагин, когда он модифицирует DOM.

Позвольте мне объяснить это на примере календаря выбора даты.

import { Directive, ElementRef, OnInit, AfterViewInit, Input, forwardRef, OnDestroy } from '@angular/core';
import { Moment } from 'moment';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';


const DATE_PICKER_VALUE_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => FnCalendarDirective),
  multi: true,

};

@Directive({
  selector: '[fn-calendar]',
  providers: [DATE_PICKER_VALUE_ACCESSOR],
})
export class FnCalendarDirective implements OnInit, AfterViewInit, ControlValueAccessor, OnDestroy {


  @Input() format: string = 'DD/MM/YYYY HH:mm';
  @Input() showClose: boolean = true;
  @Input() sideBySide: boolean = false;
  @Input() ngModel;

  private onTouched = () => { };
  private onChange: (value: string) => void = () => { };

  constructor(private el: ElementRef) {
  }

  ngOnInit() {

  }

  ngAfterViewInit() {
    $(this.el.nativeElement).datetimepicker({
      locale: 'fr',
      sideBySide: this.sideBySide,
      format: this.format,
      showClose: this.showClose,
      icons: {
        time: 'fa fa-clock-o',
        date: 'fa fa-calendar',
        up: 'fa fa-chevron-up',
        down: 'fa fa-chevron-down',
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-bullseye',
        clear: 'fa fa-trash',
        close: 'fa fa-times'
      },
    }).on('dp.change', event => {
      let date: Moment = (<Moment>(<any>event).date);
      if (date) {
        let value = date.format(this.format);
        this.onChange(value);
      }
    });
    this.writeValue(this.ngModel);
  }

  writeValue(date: string) {
    $(this.el.nativeElement).datetimepicker().data('DateTimePicker').date(date);
  }

  registerOnChange(fn: any) {
    this.onChange = fn;
  }

  registerOnTouched(fn: any) {
    this.onTouched = fn;
  }

  ngOnDestroy() {
    $(this.el.nativeElement).datetimepicker().data('DateTimePicker').destroy();
  }
}

Важные вещи здесь - метод writeValue, который позволяет Angular2 уведомлять ваш плагин jquery, который производит изменение. И registerOnChange, который позволяет вам уведомить Angular2, что ваш плагин внесет изменения в DOM.

В заключение, ключ для использования jQuery заключается в том, чтобы обернуть внутреннюю директиву jQuery внутри и реализовать CustomValueAccesor для обработки связи между вашим плагином и Angular2.

Чтобы найти типизацию, вы можете использовать DefinitlyTyped GitHub, который является хранилищем определения типирования из лота библиотеки js.

  [1]: http://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

Ответ 5

Вы не должны связывать компонент Angular с jQuery любой ценой

• Загрузите jQuery с тегом <script>.
• Добавить обработчик документа jQuery.

  $('document').ready((function($) {

      return function() {

        // DOM is ready and $ is a reference to jQuery

        // It time to things done using $

      };

  })(jQuery));

Pros

• Angular компонент свободен от зависимости jQuery.
• Легче тестировать такой компонент, поддерживать и повторно использовать.
• Код jQuery изолирован.

Однако, если вам нужно использовать jQuery внутри компонентов, используйте службы или директивы.

Если у вас возникли проблемы с загрузкой частичных представлений, используйте обработчик событий jQuery в документе node и обработчик загрузки окна jQuery.

Ответ 6

мы можем использовать, как показано ниже:

var jq=require('./jquery.min.js');
.....
export class AppComponent{
  ngOnInit(){
   jq();
   console.log($('body'))  // show:[body, prevObject: r.fn.init[1]]
                           //ok!normal operation!
  }
}