Javascript Angular 2.x选择DOM元素

我知道这应该很容易，但是angular 2.0还没有太多的例子

在我的一个组件中，在某些情况下，我需要在body标记上添加类。但我的应用程序是自举的，比body更深，所以我需要

angular.element('body').addClass('fixed');

但是在Angular 2.0中

---

顺便说一句，我知道我可以通过某种方式引导我的应用程序包含

body

标记，但我认为在其他一些情况下，我仍然需要选择一些元素，因此我需要一个解决方案来完成这个简单的任务-“选择元素并向其添加类”

更新

我不确定在RC中是否仍然支持

DOM

。相关的声明不是很清楚。差不多

DOM

仅供内部使用。直接访问DOM或使用自定义渲染器

我没有看到如何实现自定义渲染器，也没有看到如何根据当前平台（webworker、服务器、DOM线程）提供实现

更新 这似乎是有角度的方式

import { DOM } from 'angular2/src/platform/dom/dom_adapter';

DOM.addClass(DOM.query("body"), 'fixed');

从

../src/..

导入，风险自负

../src/..

被认为是私有实现，您不能指望任何保证API不会在不通知的情况下更改。

我在Dart中试用过，效果很好（但不确定上面的TS导入是否正确）。在Dart中，

DOM

由

包导出：angular2/angular2.Dart

原创

---

如果您想访问Angular应用程序根以外的DOM元素，只需使用，无需涉及Angular。

我不建议从Angular直接访问DOM，但您可以通过组件的ElementRef使用DOM挂钩。一旦访问了它，就可以直接使用它，也可以通过jquery或任何其他DOM操作技术使用它。我提供了一个如何使用jquery运行常规查询的示例。如果您总是使用body标记，那么实际上并不需要ElementRef，但它对于与组件根相关的内容非常有用

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 {
    elementRef: ElementRef;

    constructor(private elementRef: ElementRef) {
    }

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

更多信息请点击此处：

---

演示：

从Angular2版本2.0.0-beta.17开始

在Angular2中，这将很好地为您服务

请看这是用打字机写的。这正是你想要的

指令文件

my highlight.ts

有以下行：

this.renderer.setElementClass(this.element, "red", true);

这将在元素上设置CSS类

而

template.html

具有用指令

[myHighlight]

修饰的实际元素：

<p [myHighlight]>Mouseover to highlight me!</p>

鼠标悬停以突出显示我

---

在我看来，这是对这个问题的最不粗俗的回答，对jqLite没有任何依赖性。

从

angular 2.4

开始，您应该插入

文档，并且不要与任何适配器交互：

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';

@Component({})
export class MyClass {

    constructor (@Inject(DOCUMENT) private document) { }

    doSomething() {
        this.document.someMethodOfDocument();
    }
}

进一步阅读：
Angular 2/4应用程序中的DOM操作

要在Angular 2/4应用程序中操作DOM，我们需要
实现
AfterViewInit的
ngAfterViewInit（）
方法。第一次检查子指令的绑定时，将调用方法
ngAfterViewInit（）
。换句话说，当最初渲染视图时

@ViewChild
提供对
nativeElement
的访问。建议不要访问
ngAfterViewInit（）
中的
nativeElement
，因为它不是浏览器安全的。而且，web工作人员不支持它。Web工作者永远不会知道DOM何时更新

正确的方法是使用
渲染器
。渲染器需要注入到组件构造函数中。我们需要在视图中提供对
HTML
元素的
id
引用，如下所示：


export class SampleComponent implements AfterViewInit {

  @ViewChild("p1") p1;

  constructor(private renderer: Renderer2) //Renderer set to be depreciated soon
  { }

  ngAfterViewInit() {

    //recommended DOM manipulation approach
    this.renderer.setStyle(this.p1.nativeElement, //setElementStyle for soon to be depreciate Renderer
      'color',
      'red');

    //not recommended DOM manipulation approach
    //this.p1.nativeElement.style = "color:blue;";
  }

}


应通过相应的组件
.ts
文件访问，如下所示：


export class SampleComponent implements AfterViewInit {

  @ViewChild("p1") p1;

  constructor(private renderer: Renderer2) //Renderer set to be depreciated soon
  { }

  ngAfterViewInit() {

    //recommended DOM manipulation approach
    this.renderer.setStyle(this.p1.nativeElement, //setElementStyle for soon to be depreciate Renderer
      'color',
      'red');

    //not recommended DOM manipulation approach
    //this.p1.nativeElement.style = "color:blue;";
  }

}

angular.element（document.querySelector（'body'））.addClass（'fixed'）但在angular 2.0中，我没有
angular
对象，是吗？
document.querySelector（'body'）。className+='fixed'组件最好是密封的，它们应该只影响它们自己和它们的孩子。我了解这个用例，但是如果它是绝对必要的，请仔细考虑。但是angular 1.x有jquery lite或其他东西来帮助添加/删除类。angular 2.0是否有类似jqlite的功能来帮助添加/删除应用程序根目录之外的元素的类？我不这么认为。Angular2旨在避免直接访问DOM，以确保所有内容都能与webworkers和服务器端渲染一起工作。感谢您的提示。最后，我做了以下工作：
ngOnInit（）{var dom=new BrowserDomAdapter（）；dom.addClass（dom.query（“body”），“login content”）；}ngondstroy（）{var dom=new BrowserDomAdapter（）；dom.removeClass（dom.query（“body”），“login content”）；}
在beta7中，导入现在是
import{BrowserDomainAdapter}从“angular2/platform/browser”；
查看此处的可用方法：您应该尽量不要使用jQuery。它确实不需要现代dom遍历和标准化，ng2提供了许多浏览器可能不需要的功能have@amcdnl您能否提供一个示例，说明如何使用类“.moving box”访问元素如上述代码所示？elementRef.nativeElement。getElementsByClass@juanpastas如果有一个样式指南，并且它实际上是相同的3个文件（html/style/typescript），它怎么会没有约定呢基本上一遍又一遍。尝试Angular CLI，它也会让您的生活更轻松。我不认为这与向Angulars根组件之外的元素添加类的问题有什么关系。本教程显示的实际上是不好的做法。另请参见。如果您认为必须使用
ElementRef.nativeElement
，请将其与
渲染器
如中所示，而不是直接调用