Angular 2.x选择DOM元素

Angular 2.x selecting DOM element

本文关键字：DOM 元素 选择 Angular      更新时间：2023-09-26

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

在我的一个组件中，在某些情况下，我需要在body标记上添加类。但我的应用程序比主体更深，所以我需要像这样的东西

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

但在Angular 2.0中。

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

更新

我不确定在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。

自Angular2 2.0.0-beta.17版本起。

Angular2中的属性指令将很好地为您做到这一点。

请看这篇用TypeScript写的文章。这可以很好地满足你的需求。

指令文件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开始，您应该注入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

Angular 2/4应用程序中的DOM操作

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

CCD_ 18提供对CCD_。建议不要访问ngAfterViewInit()内部的nativeElement，因为它对浏览器不安全。此外，它不受网络工作者的支持。Web工作者永远不会知道DOM何时更新。

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

<p #p1></p>

它应该由相应的子组件.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直接访问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

相关文章：