Question

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

在我的某个组件中，在某些情况下，我需要在body标签上添加class。但是我的应用程序比身体更深，所以我需要像

这样的东西

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

但是在Angular 2.0 ..

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

Answer 1

<强>更新

我不确定RC中是否仍然支持DOM。相关的陈述并不十分清楚。像

这样的东西

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版本2.0.0-beta.17开始。

Angular2中的

Attribute Directives会很好地为你做这件事。

请参阅使用TypeScript编写的此plunk。这很符合您的要求。

指令文件my-highlight.ts包含以下行：

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

这会在元素上设置CSS类。

虽然template.html具有使用指令[myHighlight]修饰的实际元素：

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

对我而言，这对问题提供了最少的黑客答案，而不依赖于jqLite。

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

Answer 4

Angular 2/4 app中的DOM操作

要在Angular 2/4应用中操作DOM，我们需要implement ngAfterViewInit() AfterViewInit的方法ngAfterViewInit()。当第一次检查子指令的绑定时，调用方法@ViewChild。换句话说，当最初呈现视图时。

nativeElement可以访问nativeElement。建议不要访问ngAfterViewInit()内的renderer，因为它不是浏览器安全的。此外，网络工作者不支持它。 Web工作者永远不会知道DOM何时更新。

正确的方法是使用id。渲染器需要注入组件构造函数。我们需要在视图上为HTML元素提供<p #p1></p>引用，如下所示：

.ts

应由相应的coponent 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;"; } }文件访问，如下所示：

public func ==(lhs: Result<T>, rhs: Result<T>) -> Bool {
    switch (lhs, rhs) {
    case let (.success(lhsVal), .success(rhsVal)):
        return lhsVal == rhsVal
    case (.error, .error):
        return true
    default:
        return false
}

Answer 5

我不建议从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'});
    }
}

此处有更多信息：http://www.syntaxsuccess.com/viewarticle/using-jquery-with-angular-2.0

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

Angular 2.x选择DOM元素

5 个答案: