angular - 在 Angular 2 中使用浏览器 DOM 的方式

Question

如果我想创建一个全局 DOM 元素并从当前指令的许多实例中使用它，我对如何使用本机 DOM 元素的理解很弱？

有人可以解释一下指令和DOM的工作吗？

Answer 1

这是一种获取与组件关联的元素的方法

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

declare var jQuery:any;

@Component({
    selector: 'jquery-integration'
})

@View({
    templateUrl: './components/jquery-integration/jquery-integration.html'
})

export class JqueryIntegration implements OnInit {
    elementRef: ElementRef;

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

    ngOnInit() {
        jQuery(this.elementRef.nativeElement).find('.moving-box').draggable({containment:'#draggable-parent'});
    }
}

使用 ElementRef 作为基线，您可以使用 jquery 或任何其他 DOM 操作技术来引用其他元素。

此示例使用 jquery。

这是更多信息： http ://www.syntaxsuccess.com/viewarticle/using-jquery-with-angular-2.0