Как использовать JQuery с Javascript в Angular 2

Question

Как использовать JQuery с Javascript в Angular 2

    import {Component, ElementRef, OnInit} from 'angular2/core';
    declare var jQuery:any;
    @Component({
      selector: 'jquery-integration',
      templateUrl: './components/jquery-integration/jquery-integration.html'
    })
    export class JqueryIntegration implements OnInit {
      elementRef: ElementRef;
      constructor(elementRef: ElementRef) {
        this.elementRef = elementRef;
      }
      ngOnInit() {
        jQuery(this.elementRef.nativeElement).draggable({
        containment:'#draggable-parent'
      });
    }
  }

Можно ли использовать jQuery с TypeScript в Angular2, как описано выше? Как мне использовать jQuery с JavaScript в Angular2?

15

jquery angular typescript

Источник

user5107253 28 янв '16 в 06:09

6 ответов

Другие вопросы по тегам jquery angular typescript

user4911384 28 янв '16 в 07:44 2016-01-28 07:44 · Answer 1 · 2016-01-28 07:44

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

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

Пример:

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

Рассмотрим этот Плункер:

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

Не рекомендуется :

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

user2513269 16 мар '16 в 13:33 2016-03-16 13:33 · Answer 2 · 2016-03-16 13:33

Когда у вас установлена библиотека машинописи JQuery, сделайте ссылку на нее следующим образом

///<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! ^_^");
  }
}

user3701499 06 окт '16 в 04:15 2016-10-06 04:15 · Answer 3 · 2016-10-06 04:15

Что я делаю, чтобы решить эту проблему:

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

Бежать 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 хочу использовать библиотеку

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

user1387310 07 янв '17 в 10:08 2017-01-07 10:08 · Answer 4 · 2017-01-07 10:08

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

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

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

После этого, чтобы использовать jQuery с Angular2, вы должны понимать механизм fondamental. 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 о том, что происходит изменение. И зарегистрируйте OnChange, который позволит вам уведомить 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

user2525337 07 янв '17 в 09:34 2017-01-07 09:34 · Answer 5 · 2017-01-07 09:34

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

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

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

      return function () {

        // DOM готов, а $ является ссылкой на jQuery

        // Пришло время делать вещи, используя $

      };

  })(JQuery));

Плюсы:

Угловой компонент не зависит от jQuery.
Проще протестировать такой компонент, поддерживать и повторно использовать.
Код jQuery изолирован.

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

user7281846 07 фев '17 в 06:16 2017-02-07 06:16 · Answer 6 · 2017-02-07 06:16

Мы можем использовать как следующим образом:

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

0

Источник

user7281846 07 фев '17 в 06:16

user1344560 18 июл '20 в 20:22 2020-07-18 20:22 · Answer 7 · 2020-07-18 20:22

Самый быстрый и грязный способ сделать это:

(<any>window).$('.alert')

0

Источник

user1344560 18 июл '20 в 20:22