Расширенные манипуляции с DOM в Angular

#jquery #angular #dom

Вопрос:

Всем доброго утра,

В настоящее время я изучаю Angular. Я хотел бы знать, как мы можем добиться манипулирования DOM, как мы привыкли делать в jQuery, но угловым способом.

Например, если я хочу выбрать все элементы определенного типа или с определенным классом, выполните цикл по массиву или списку совпадающих элементов и примените некоторую обработку (после того, как страница или представление будут отображены как функция document ready в jQuery).

В jQuery это выглядело бы как :

 $('elementsTofind').each(function(index, value){
  // Apply code to each element
});

Спасибо

1. не уверен, зачем вам нужно было бы делать это с Angular. Почему это не выполняется во время визуализации?

2. Ну, вам нужно начать забывать что-либо о jquery.

3. Я не использую jQuery, но я хотел бы знать, как мы можем достичь того же результата, используя Angular mecanism.

4. Вы не выполняете манипуляции с DOM, как в jQuery. Ваша (казалось бы, теоретическая) проблема основана на поведении jQuery. Как упоминалось выше, полностью забудьте о jQuery и придумайте реальную проблему, которую вам нужно решить, и задайте соответствующий вопрос, чтобы узнать, как это делается в Angular.

Ответ №1:

Попробуйте

 import {AfterViewInit, Component, QueryList, ViewChildren} from '@angular/core';
@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements AfterViewInit {
  @ViewChildren('elementsTofind') elementsTofind!: QueryList<Element>;
  ngAfterViewInit() {
    // viewChildren is set
    // ...
    myMethod();
    // ...
  }
  myMethod(): void {
    elementsTofind.forEach((value, index) => {
      // Apply code to each element
    });
  }
}

1. Спасибо Kaustubh за решение. Я еще не пробовал, но могу ли я поместить ту же логику в директиву вместо файла component .ts и поместить директиву в компонент после? Будет ли это также работать подобным образом. Я спрашиваю, потому что кто-то сказал мне никогда не манипулировать и не взаимодействовать с DOM вне директивы e. Спасибо

2. @PierreRubensMilorme Я не знаю ответа на этот вопрос. Я бы также предложил сделать ваши будущие вопросы как можно более подробными (вместо «как мне <X>?», скажите «как мне <X> использовать директивы?»).