Angular2 检索所有具有类名的元素

Question

任何人都可以帮助如何在 Angular 2 中找到具有特定类名的“所有”元素吗？我认为这将是微不足道的，但它给了我更多准备好的问题。

<span class="classImLookingFor">foo</span>
<span class="classImLookingFor">Voo</span>
<span class="classImLookingFor">Moo</span>

我认为通过执行下面的操作将返回所有具有类“classImLookingFor”的元素，但它只返回第一个实例。

constructor(private renderer: Renderer){}
ngAfterViewInit(){
 const el = this.renderer.selectRootElement('.classImLookingFor');
 this.renderer.setElementAttribute(el, 'tabindex', 0);
}

之后，我的标记看起来像这样。

<span class="classImLookingFor" tabindex="0">foo</span>
<span class="classImLookingFor">Voo</span>
<span class="classImLookingFor">Moo</span>

似乎我应该能够创建一个渲染器数组，但这似乎也不起作用。我需要使用该类名操作每个元素。提前致谢

Answer 1

这不是返回 DOM 中的所有元素吗？有没有办法只返回由我“在”中的 Angular 组件生成的元素？

你需要……

1. 在constructor中注入ElementRef

   constructor(private renderer: Renderer, private elem: ElementRef){}
   

2. 使用querySelectorAll api 查找您正在搜索的元素。

   ngAfterViewInit(){
       // you'll get your through 'elements' below code
       let elements = this.elem.nativeElement.querySelectorAll('.classImLookingFor');
   }
   

The answer @Aravind 提供的性能并不是最好的，因为它会搜索整个 DOM。

这个解决方案只会搜索当前组件内的 DOM。

Answer 2

Angular 10+ 文档与 SSR 的兼容性，导入：

import { DOCUMENT } from '@angular/common'

然后注入：

constructor(@Inject(DOCUMENT) private _document: HTMLDocument) {
    }

并像这样在您的组件/指令中使用：

doSomething(): void {
 this._document.querySelectorAll('.classImLookingFor')
}

Answer 3

在评论对 OP 有效时回答。

你应该使用

document.querySelectorAll('.classImLookingFor')

Answer 4

有多种方法可以做，但 Angular 9+ 版本提供的最新方法是：

1.import Inject and DOCUMENT in angular。

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

2.然后在所需类的构造函数中创建一个引用。

constructor(@Inject(DOCUMENT) private _document: HTMLDocument) {}

3.用作所有可用javascript方法的变量。

selectElement(): void {
 this._document.querySelector('#mySelectedId');
}

Answer 5

这对于您的用例来说可能有点过于简单化了，但是您有什么理由不能像这样使用本机 DOM 函数吗？

var domRepresentation = document.getElementsByClassName('classImLookingFor');
var angularElement = angular.element(domRepresentation);

Answer 6

你需要在 Angular 中使用 DOM

var element=document.getElementsByClassName("X").item(0);

它对我有用！