jquery - 在 angular 2 中使用 jquery 小部件的最佳方法是什么？

Question

1. 在 Angular 2 组件中使用 Jquery 小部件是否会导致 Angular 的影子 dom 构造出现任何问题？

2. 在 Angular 2 中使用 jquery 小部件的推荐方法是什么？

Answer 1

我的理解是 Angular 在组件级别支持影子 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