Angular 2.x选择DOM元素

Question

我知道它应该很容易但是角度2.0还没有很多例子..

在某些情况下,在我的一个组件中,我需要在body标签上添加class.但是我的应用程序比身体更深,所以我需要类似的东西

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

但在Angular 2.0 ..

顺便说一句,我知道我可以以某种方式引导我的应用程序包含body标签,但我认为在其他一些情况下我还是需要选择一些元素,所以我需要一个解决方案如何做这个简单的任务 - "选择元素并添加类到它"

Answer 1

更新

我不确定DOMRC是否真的支持.相关陈述不是很清楚.就像是

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

我没有看到如何实现自定义渲染器或如何根据当前平台(webworker,服务器,DOM线程)提供实现.

更新 这似乎是Angular2的方式

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

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

导入.../src/...风险由您自行承担..../src/...被视为私人实施,您不能指望任何保证API不会更改,恕不另行通知.

我在Dart中尝试过它并且工作正常(不确定上面的TS导入是否正确).在Dart DOM中导出package:angular2/angular2.dart

原版的

如果要访问Angular应用程序根目录之外的DOM元素,只需使用document.querySelector(),不需要涉及Angular.

Answer 2

截至Angular2 Version 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>

对我来说,这对问题提供了最少的黑客答案,而不依赖于jqLit​​e.

Answer 3

截至angular 2.4你应该注入DOCUMENT并且不与任何适配器交互:

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();
    }
}

进一步阅读:https://github.com/angular/angular/issues/8509