你不应该以任何价格将Angular组件与jQuery绑定

Question

    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可以和Angular2中的TypeScript一起使用吗？如何在Angular2中使用jQuery和JavaScript？

Answer 1

在我看来：如果你做对了，如果你把它保持在最低限度，你就应该坚持下去。

在项目中安装jQuery Typings：tsd install jQuery
使用脚本标记（或其他加载程序...）加载jQuery
使用Angular 2 Directive

示例：

        new MockUp<ClassToTest>() {
            @Mock
            boolean methodToMock(int value) {
                return true;
            }
        };

考虑一下这个Plunker：

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

<强>唐＆＃39; T：

不要将它用于DOM操作，有Angular方式......
不要用它来进行AJAX调用，有Angular方式......
不要将它用于动画，ngAnimation即将到来......

Answer 2

安装了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! ^_^");
  }
}

Answer 3

我该怎么做才能解决这个问题：

对于库不支持@types/并且库需要在加载文档时加载（平均库需要在文档的脚本标记中添加）

运行npm install jquery --save
在scripts或styles angular-cli.json中添加js / css文件

"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不同

Answer 4

你必须告诉你在哪里可以找到你的jQuery typeScript定义。这可以在typings.d.ts文件中完成，你可以这样输入：

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

或者您可以通过节点安装打字，并让您的配置自动加载。这就是angular-cli所做的。

之后，要在Angular2中使用jQuery，您必须了解基本机制。 Angular2拥有它自己的dom表示，jQuery操纵这个dom。这就是为什么人们说'不要在Angular2＆＃34;中使用jQuery'。这不对。 Angular2为此问题提供了解决方案。它称之为ControlValueAccessor。这样做的目的是在你的jQuery插件修改DOM时提醒角度，并且在修改DOM时让angular通知你的插件。

让我通过日期选择日历的例子来解释这一点。

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

Answer 5

你不应该以任何价格将Angular组件与jQuery绑定

使用<script>标记加载jQuery。
添加jQuery文档就绪处理程序。


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

      return function() {

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

        // It's time to things done using $

      };

  })(jQuery));

<强>赞成：

Angular组件不受jQuery依赖。
更容易测试此类组件，维护和重复使用。
jQuery代码已被隔离。

但是，如果需要在组件内部使用jQuery，请使用服务或指令。

如果您在加载部分视图时遇到问题，请在文档节点和jQuery窗口加载处理程序上使用jQuery事件处理程序。

Answer 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!
  }
}

Answer 7

最快，最脏的方法：

COPY FROM username1/passwd1@//192.168.3.17:1521/PROD_SERVICE to username2/passwd2@//192.168.4.17:1521/SANDBOX_SERVICE INSERT TABLE_C (*) USING (SELECT * FROM TABLE_C);

如何在角度为2

7 个答案:

你不应该以任何价格将Angular组件与jQuery绑定