在角度2组件中使用Jquery小部件是否会导致角度构造阴影dom的任何问题?
在angular 2中使用jquery小部件的推荐方法是什么?
答案 0 :(得分:10)
我的理解是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集成可拖动插件。
以下是更多信息和演示:
http://www.syntaxsuccess.com/viewarticle/using-jquery-with-angular-2.0
http://www.syntaxsuccess.com/angular-2-samples/#/demo/jquery