Question

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

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

我认为通过做下面的操作会返回所有带有类的元素＆＃34; classImLookingFor＆＃34;但它只返回第一个实例。

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>

似乎我应该能够创建一个Renderer数组，但这似乎也不起作用。我需要用该类名操作每个元素。在此先感谢

Answer 1

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

你需要......

在ElementRef

中注入constructor

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

使用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

回答该评论适用于OP。

您应该使用

document.querySelectorAll('.classImLookingFor')

Answer 3

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

import { DOCUMENT } from '@angular/common'

然后注入：

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

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

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

Answer 4

对于您的用例，这可能有点过于简单，但有没有理由不能使用本机DOM函数，如此？

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

Answer 5

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

1.import Inject 和 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 6

您需要在Angular中使用DOM

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

对我有用！

Angular2使用类名检索所有元素

6 个答案: