Question

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

Answer 1

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

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

查看此问题，它可以帮助您： How to get dom element in angular 2

Answer 2

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

Answer 3

我要将此作为另一个答案发布，而不是编辑旧答案，因为恕我直言这两种方法都很有用。但这绝对是更多＆＃34; Angularish＆＃34;一。

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

ElementRef可能是最好避免的。显然，它可以让您了解潜在的XSS攻击。各种红色＆＃34;当心＆＃34;围绕文档。

所以我确定了一些非常有效的东西，那就是ViewChild。

我的模板：

<input #myinput type="text" />

注意看起来好看的#myInput。它可以作为身份证，但不是简单的。 DOM id =＆＃39;＆＃39;。我假设这会让你解决唯一的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

今天，存在一种使用文档查询元素的“角度”方式：

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..）。如果您还正在操作Elements，则应考虑使用Angulars Renderer2

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

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

4 个答案: