Question

我无法在angular2中使用jQuery。我的一个朋友在那里工作（在Mac上）它不在我的Windows机器上。

错误：

jquery-ui.js:1 Uncaught ReferenceError: require is not defined
angular2.dev.js:23935 EXCEPTION: TypeError: jQuery(...).find(...).sortable is not a function in [null]
angular2.dev.js:23925 EXCEPTION: TypeError: jQuery(...).find(...).sortable is not a function in [null]BrowserDomAdapter.logError @ angular2.dev.js:23925
angular2.dev.js:23925 ORIGINAL EXCEPTION: TypeError: jQuery(...).find(...).sortable is not a functionBrowserDomAdapter.logError @ angular2.dev.js:23925
angular2.dev.js:23925 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23925
angular2.dev.js:23925 TypeError: jQuery(...).find(...).sortable is not a function at EditPresentationComponent.ngOnInit

我们使用jquery的代码段。

import { Component, OnInit, ElementRef, Inject } from 'angular2/core';

declare var jQuery: any;

    @Component({
        selector: 'edit-presentation',
        templateUrl: 'app/Edit Presentation/edit_presentation.component.html'
    })

export class EditPresentationComponent implements OnInit {
    elementRef: ElementRef;

    isMyPresentationEmpty = true;

    constructor(@Inject(ElementRef) elementRef: ElementRef) {
        this.elementRef = elementRef;
    }

    ngOnInit() {
        var self = this;

        // Initialize Sortable on lists
        var oldList, newList, item, oldIndex;
        jQuery(this.elementRef.nativeElement).find('.slide-categories .sortable-list').sortable({
            start: function(event, ui) {
                item = ui.item;
                oldIndex = item.index();
                newList = oldList = ui.item.parent().parent();
            },
            change: function(event, ui) {  
                if (ui.sender) newList = ui.placeholder.parent().parent();
                // Check for empty list and hide/show instruction text
                if (jQuery('.my-presentation-column .agile-list').has('li:not(".ui-sortable-helper")').length) {
                    self.isMyPresentationEmpty = false;
                } else {
                    self.isMyPresentationEmpty = true;
                }
            },
            stop: function(event, ui) {
                if (oldList[0] != jQuery(event.toElement).parent().parent().parent().parent()[0]) {
                    if (jQuery(event.target).parent().hasClass('slide-categories')) {
                        if (oldIndex == 0) {
                            jQuery(event.target).prepend(item.clone());
                        } else {
                            jQuery(event.target).find('li:eq(' + (oldIndex - 1) + ')').after(item.clone());
                        }
                    } else {
                        item.remove();
                    }
                }
            },
            connectWith: ".sortable-list"
        }).disableSelection();

当我执行npm install jquery或npm install jquery-ui时我得到了

`--jquery-ui@1.10.5 extraneous

结果，所以它已安装。

我希望有人能帮助我。

Answer 1

如果你使用的是typescript和angular2，你应该只安装jquery和jquery-ui的类型。然后你可以加载jQuery：

import "jquery-ui"
import * as $ from "jquery"

您似乎遇到的另一个问题是jquery-ui正在寻找require，这在本地浏览器中不存在。我会仔细检查你是如何加载jquery-ui的，因为它可能也会引入错误

Answer 2

以下是我开展工作的方式：

在主HTML文件中包含相应的JS文件

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

将jquery().storable包装到自定义指令

中

@Directive({
  selector: '[sortable]'
})
export class SortableDirective {
  constructor(private elementRef:ElementRef) {
  }

  ngOnInit() {
    $(this.elementRef.nativeElement).sortable({
      start: function(event, ui) {
        console.log('start');
      },
      change: function(event, ui) {  
        console.log('change');
      },
      stop: function(event, ui) {
        console.log('stop');
      }
    }).disableSelection();
  }
}

以这种方式使用

@Component({
  selector: 'app',
  template: `
    <ul sortable>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    </ul>
`,
  directives: [ SortableDirective ]
})
export class App implements AfterViewInit {
}

请参阅此plunkr：https://plnkr.co/edit/gQnKzqdHCY82LOCFM1ym?p=preview。

关于require问题，您可以从SystemJS加载jquery-ui，因为它了解require函数。这是一个示例：

<script>
  System.config({
    map: {
      'jquery-ui': 'nodes_module/.../jquery-ui.js'
    }
  });
</script>

然后你可以这样导入：

import jqueryui from 'jquery-ui';

ReferenceError：尝试在angular2中使用jquery时无需定义

2 个答案: