Jquery, как выбор DOM в Angular5

Question

Предположим, у нас есть угловой компонент, содержимое которого предоставляется следующим образом:

<component-A>
     <span class = "parent">
        <div class = "toBeSelected"> DemoContent</div>
     </span>
     <div class = "toBeSelected"> DemoContent2</div>
</component-A>

In jQuery , если мне нужно выбрать элемент с помощью селектора toBeSelected

$('.toBeSelected').click(function(){
    var clickedSpanTxt = $(this).html(); 
    console.log(clickedTxt);
});

Существует ли какая-либо библиотека, которая помогает в выборе вложенных элементов DOM из компонента.

As @ContentChildren из Angular5 только выбирает прямой дочерний элемент компонентато есть я могу выбрать только span с классом parent или только один div с классом toBeSelected.

Есть ли способ выбрать оба div с классом toBeSelected.

Answer 1

Вы можете использовать DOM API.Поскольку document прямо доступно в угловом компоненте (файл .ts).Таким образом, вы можете использовать

let elSelected = document.querySelectorAll(".toBeSelected");

, который будет возвращать массив элементов dom.

Answer 2

Используйте одну и ту же функцию обратного вызова для обоих элементов или создайте toBeSelected другой компонент с вложенной функцией обратного вызова.

Чтение this