在 Angular 2 中使用浏览器 DOM 的方式答案

【问题标题】：The way to work with browser DOM in angular 2在 Angular 2 中使用浏览器 DOM 的方式
【发布时间】：2015-12-30 11:36:12
【问题描述】：

如果我想创建一个全局 DOM 元素并在当前指令的许多实例中使用它，我对如何使用原生 DOM 元素没有把握？

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

【问题讨论】：

Angular 2 的一个好处是您可以像在 Angular 代码中使用 vanlila JavaScript 一样使用 DOM。不需要特定的练习。
但是这样一个指令的测试过程应该如何进行呢？
对不起兄弟，但我不知道测试。虽然您可以从 google 上的“如何测试 Web 组件”文章开始。 Coz angular 现在正在使用 webcomponents。

标签： angular angular2-directives angular2-template

【解决方案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。

【讨论】：

感谢您的回答。但是你能澄清一下 - 我应该如何测试这个？我的意思是 - 在第一个角度有一个 $window 服务，我可以模拟。这里有类似的东西还是我应该在第二个角度采取完全不同的方法？