Получение исходного элемента из обработчика событий Click In Angular - PullRequest
Новая
       51

Получение исходного элемента из обработчика событий Click In Angular

1 голос
/ 15 апреля 2020

Я все еще новичок в Angular, и я изо всех сил пытаюсь получить элемент DOM Angular Click Listener. У меня есть следующий компонент HTML: 

<div *ngFor="let menuItem of menu; index as itemId" class="menuItem">

    <div class="menuItem__top" (click)="itemClicked($event, !!menuItem.submenu)">
        <!-- Additional divs inside... -->
    </div>

</div>

Я бы хотел переключать класс "menuItem__top" при нажатии. Мой подход состоял в том, чтобы использовать прослушиватель события click, но я не могу заставить исходный элемент применить класс. 

itemClicked(event, hasSubmenu){
    console.log(this) //is the component
    let target = event.target || event.srcElement || event.currentTarget;
    if(hasSubmenu){
      console.log(target);
    }
}

Это можно сделать, получив цель $ event, но так я бы нужно проверить цель и перейти с ближайшего (". menuItem__top") до правильного исходного элемента. Есть ли простой способ в Angular передать исходный элемент прослушивателя щелчка функции щелчка или способ получить его внутри функции щелчка?

В ванили JS это было бы так же просто, как используя «this» внутри функции click, но в Angular это привязка к компоненту. (В этом случае было бы нормально потерять привязку к компоненту, если это единственный способ.)

Я думал о двух способах:

  1. Назначение Dynami c ссылка, содержащая некоторую строку и itemId, передавая itemId и извлекая ссылочный объект на основе itemId в слушателе.

  2. Использование @HostListener для прослушивания каждого "menuItem__top "нажимайте и переключайте класс каждый раз.

Какой, по вашему мнению, лучший способ? Я чувствую, что мне здесь не хватает чего-то простого.

1 Ответ

2 голосов
/ 15 апреля 2020

Go наоборот. Люди привыкли к jQuery и тому, как это работает (выбирая элементы, уже присутствующие в DOM, затем добавляя их в класс). Так что в Angular они пытаются сделать то же самое и захватить элемент, по которому щелкнули, чтобы применить его к классу. Angular (и React, и другие) работают наоборот. Они строят DOM из данных. Если вы хотите изменить элемент, начните с изменения данных, из которых он был сгенерирован.

Этот <div class="menuItem__top">, на который вы нажимаете, создан из let menuItem. Все, что вам нужно сделать, это добавить свойство, скажем «isClicked», к menuItem. 

<div *ngFor="let menuItem of menu; index as itemId" class="menuItem">

    <div class="menuItem__top"
        [class.isClicked]="menuItem.isClicked"
        (click)="menuItem.isClicked = true">
            <!-- Additional divs inside... -->
    </div>
</div>
...