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>

Кажется, я должен создать массив Renderer, но это тоже не работает. Мне нужно манипулировать каждым элементом с этим именем класса. Заранее спасибо


angular renderer
person dekaha1    schedule 12.04.2017    source источник
comment
вы можете использовать document.querySelectorAll('.classImLookingFor')   -  person Aravind    schedule 12.04.2017
comment
Как раз то, что я искал. Это работает отлично. Однако по какой-то причине document.getElementsByClassName у меня не сработал. Спасибо за быстрый ответ. Я слишком усложнял   -  person dekaha1    schedule 12.04.2017
comment
можете ли вы проголосовать за мой ответ, так как он вам помог   -  person Aravind    schedule 02.07.2017

Ответы (6)


arrow_upward
65
arrow_downward

Разве это не возвращает все элементы в DOM? Есть ли способ вернуть только элементы, сгенерированные компонентом Angular, в котором я нахожусь?

Тебе следует...

  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 внутри текущего компонента.

person Paritosh    schedule 22.02.2018
comment
это фактический способ получить отображаемое значение (querySelectorAll) в Angular. - person SHUBHASIS MAHATA; 17.09.2020

arrow_upward
11
arrow_downward

Ответ на комментарий сработал для ОП.

Вы должны использовать

document.querySelectorAll('.classImLookingFor')
person Aravind    schedule 12.04.2017
comment
Разве это не возвращает все элементы в DOM? Есть ли способ вернуть только элементы, сгенерированные компонентом Angular, в котором я нахожусь? - person Skorunka František; 03.02.2018
comment
@SkorunkaFrantišek, вы правы, проверьте этот ответ - person Paritosh; 26.02.2018
comment
Я проголосовал, потому что это полезно, если вы хотите сослаться на элемент в документе, который находится за пределами компонента Angular, в котором вы находитесь. - person Yvonne Aburrow; 17.07.2019

arrow_upward
10
arrow_downward

Совместимость документов Angular 10+ с SSR, импорт:

import { DOCUMENT } from '@angular/common'

затем введите:

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

И используйте в своем компоненте/директиве вот так:

doSomething(): void {
 this._document.querySelectorAll('.classImLookingFor')
}
person Nexeuz    schedule 10.11.2020

arrow_upward
3
arrow_downward

Это может быть немного упрощенным для вашего варианта использования, но есть ли какая-то причина, по которой вы не можете использовать собственные функции DOM, например?

var domRepresentation = document.getElementsByClassName('classImLookingFor');
var angularElement = angular.element(domRepresentation);
person Billy Barry    schedule 12.04.2017
comment
измененная версия комментария - person Aravind; 12.04.2017
comment
Просмотрел комментарий, когда впервые прочитал это, извините за это. - person Billy Barry; 12.04.2017
comment
Я очень новичок в Stack Overflow и не видел ответов. Лучше всего сначала прокомментировать, а не отвечать на вопрос напрямую @Aravind? - person Billy Barry; 12.04.2017
comment
Откуда angular? Это AngularJS или Angular2+? - person Christian; 19.02.2020

arrow_upward
1
arrow_downward

Существуют различные способы сделать это, но последние версии Angular 9+:

1.import Inject и DOCUMENT в 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');
}
person Amit Singh    schedule 17.03.2021
comment
Это работает и в Angular 8. - person Steve Klock; 06.04.2021
comment
Каковы преимущества использования этого DOCUMENT углового/общего и собственного документа.*? - person Phoenix404; 10.07.2021

arrow_upward
-3
arrow_downward

вам нужно использовать DOM в angular

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

меня устраивает!

person mohsen malvandy niko    schedule 28.07.2018
comment
может работать в AngularJS, не будет работать в Angular 2+ - person Yvonne Aburrow; 18.07.2019
comment
Вы не должны обращаться к DOM напрямую, это нарушает абстракцию Angular над платформой. Используйте ViewChild и/или Renderer2. - person Looted; 25.10.2019