web-dev-qa-db-ja.com

Angular2はクラス名を持つすべての要素を取得します

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>

レンダラー配列を作成できるはずですが、それでもうまくいかないようです。そのクラス名で各要素を操作する必要があります。前もって感謝します

angularrenderer
18
dekaha1

これはDOMのすべての要素を返しませんか？ Angularコンポーネント「in」で生成された要素のみを返す方法はありますか？

必要がある...

  1. ElementRefにconstructorを挿入します

    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');
}

@ Aravind が提供する答えは、DOM全体を検索するため、パフォーマンスに最適ではありません。

このソリューションは、現在のコンポーネント内のDOMを検索するだけです。

26
Paritosh

コメントがOPで機能したため、回答。

あなたが使用する必要があります

document.querySelectorAll('.classImLookingFor')
6
Aravind

これはユースケースに対して少し単純化しすぎかもしれませんが、ネイティブDOM関数を使用できない理由はありますか？

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

あなたはDOMを角度で使用する必要があります

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

わたしにはできる！

0
mohsen malvandy niko