我如何通过选择器访问 DOM 元素

Question

在 Angular2 中，有没有办法通过它的选择器获取元素，而不是在模板中，而是在整个 DOM 中？

Answer 1

当然，window.document.querySelector，或 window.document.querySelectorAll。

Answer 2

不建议直接在 angular2 中访问 DOM，因为您绕过了 Angular2 渲染器

您可以使用其他 angular 2 个功能来执行此操作，例如：添加对此元素的引用。

看看这个问题，它可以帮助你：

Answer 3

我打算 post 这是另一个答案，而不是编辑旧答案，因为恕我直言，这两种方法都很有用。但这绝对是 "Angularish" 多得多的一个。

有两种 Angularish-2 方法可以获取模板 DOM 元素的引用； ElementRef 和 ViewChild。可能还有更多，但这是到处都提到的两个。

ElementRef 可能最好避免。显然，它会让您面临潜在的 XSS 攻击。文档周围有各种红色 "beware"。

所以我选择了一个非常有效的东西，那就是 ViewChild。

我的模板：

<input #myinput type="text" />

请注意，#myInput 看起来很奇怪。它用作 ID，但不是普通的 ol' DOM id=''。我假设这会让您解决唯一 ID 问题，以及用空 CSS 类代替 ID 标记元素的丑陋技巧。

在你的代码中：注意我使用的是没有注释的 ES6。但要获得相同的效果，您可以使用 @ViewChild 注释。它在 TS 中有很好的文档（根本不是在 ES6 中，我花了很长时间才把它拼凑起来）。

仅供参考，我必须想出一个干净的方法来做到这一点，因为我想实现一个 RxJS 流来做一些去抖动等等。

import { Component, ngOnInit, ViewChild } from '@angular/core';

class HomeComponent {
    constructor( ) {}

    ngOnInit ( ) {
        // .nativeElement console.log's out to what you'd expect.
        var inputBox = this.myInputRef.nativeElement;
        // left this in to demonstrate it works as plain ol' DOM elem,
        // if it didn't, this wouldn't work.
        var source = Rx.Observable.fromEvent(inputBox, 'click');
        ...
    }
}

HomeComponent.annotations = [
    new Component ( {
       templateUrl: './views/home/home.component.html',
       queries: { 'myInputRef': new ViewChild ( 'myinput' ) }
    } )
];
export { HomeComponent }

很有魅力。关于时间我们在 Angular 中有这样的事情。 JQLite 真的从来没有削减它。

Answer 4

今天有一种使用文档查询元素的“Angular”方法：

import { Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

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

  getElementsByClass(clazz: string): HTMLCollection[] {
    return this.document.getElementsByClassName(clazz);
  }
}

特别是服务器端呈现功能，例如不建议直接访问 window (window && window.document..)。如果您也在操纵元素，您应该考虑使用 Angulars Renderer2

如果您只需要访问当前组件中的元素，您可以使用 @ViewChild 或 ElementRef 功能。

我如何通过选择器访问 DOM 元素

How I can access DOM element by selector

angular2-template

angular