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

问题描述

1. 在angular 2组件中使用Jquery小部件会导致angular的阴影dom的构造出现任何问题吗?

1. Will using Jquery widgets inside angular 2 components cause any issues with angular's construction of its shadow dom?

在angular 2内使用jquery小部件的推荐方法是什么?

Whats the recommended way to use jquery widgets inside angular 2?

推荐答案

我的理解是Angular在组件级别支持影子DOM，因此我认为您可以自由触发组件内部的任何DOM操作-不会出现问题.但是，不建议直接从组件访问DOM，但是我认为存在有效的用例.问题在于它为DOM引入了通常不必要且紧密的关系

My understanding is that Angular supports shadow DOM at the component level, so I would assume you are free to trigger any DOM manipulation inside the component - without issue. It's however not recommended to access the DOM directly from components, but I guess there are valid use cases. The issue is that it introduces an often unnecessary and tight relationship to the DOM

这是一个如何将jQuery插件与Angular 2组件集成的示例.我认为大多数jquery小部件都建模为插件，因此应该可以正常使用.

Here is an example of how to integrate a jquery plugin with an Angular 2 component. I think most jquery widgets are modeled as plugins, so this should work in general.

    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中的可拖动插件.

Specifically this shows how to integrate the draggable plugin from jquery-ui.

这里还有更多信息和演示:

Here is more info and a demo as well:

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

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

这篇关于在angular 2中使用jquery小部件的最佳方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！