什么是在角度2内使用jquery小部件的最佳方法？

1. 在角度2组件中使用Jquery小部件会导致角度构造其阴影dom的任何问题吗？

2. 什么是在角度2内使用jquery小部件的推荐方法？

Answer 1

我的理解是Angular在组件级别支持shadow DOM，所以我假设您可以自由地触发组件内部的任何DOM操作 – 没有问题。 但是不建议直接从组件访问DOM，但我想有一些有效的用例。 问题在于它引入了与DOM之间经常不必要且紧密的关系

以下是如何将jquery插件与Angular 2组件集成的示例。 我认为大多数jquery小部件都被建模为插件，所以这应该是一般的。

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

具体来说，这显示了如何从jquery-ui集成draggable插件。

这里有更多信息和演示：

http://www.syntaxsuccess.com/viewarticle/using-jquery-with-angular-2.0

http://www.syntaxsuccess.com/angular-2-samples/#/demo/jquery