Как применить стили к элементу div, нажав на его дочерние элементы (angular2 / ts)

Question

HTML

<div class="tableRow">
  <div id="0-0">
    <p>Point {{levelOne}}</p>
  </div>
  <div id="0-1" (click)="select($event)">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod  </li>
  </div>
  <div id="0-2" (click)="select($event)">
    <li >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod. </li>
  </div>
  <div id="0-3" (click)="select($event)">
    <li>
      Lorem ipsum dolor sit amet, 
    </li>
  </div>
  <div id="0-4" (click)="select($event)">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing</li>
        <li>lorem ipsum dolor</li>
  </div>
  <div id="0-5" (click)="select($event)">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing</li>
  </div>
</div>

CSS

.tableRow {
  width: 90%;
  display: grid;
  grid-template-columns: 10% 18% 18% 18% 18% 18%;
}

.tableRow > div {
  background: $white;
  padding: 1em;
  border: 1px solid $purple-70;
  text-align: center;
  cursor: pointer;
}

.tableRow > div:first-child {
  font-weight: bold;
  background: $purple-10;
  cursor: default;
}

.selected {
  background-color: red !important;
}

TS

    import { Component, OnInit } from "@angular/core";

    @Component({
      selector: "example",
      templateUrl: "./example.component.html"
    })
    export class Example implements OnInit {

      public levelOne: Number = 1;
      public levelTwo: Number = 3;
      public levelThree: Number = 9;
      public LevelFour: Number = 27;

      public selected = false;

      constructor() {}

      ngOnInit() {}


    select($event) {
      let id = $event.target.id;
      if ($event.target.localName !== "div") {
        let id = $event.target.parentElement.id;
      }
    console.log(id);
   }

  }

с помощью следующего кода, щелкающего вне элемента li, приводит к тому, что id устанавливается равным действительному id, но когда я нажимаю на элемент li внутри div id, устанавливается значение undefined ... однако, если я регистрирую событие $. target.parentElement.id на консоль выводит правильный идентификатор при нажатии на элемент li.

Я уверен, что если я смогу получить правильный идентификатор, полученный при клике, я могу использовать его для назначения стиля (например, изменить цвет фона div)

Я не уверен, что я делаю неправильно, или вообще есть лучший способ?

Answer 1

Я бы просто использовал привязку стиля, чтобы связать любой стиль, который вы хотите, с родительским div, а затем использовал дочерние щелчки div, чтобы изменить значение строки, связанной с этим стилем.

<div class="tableRow" [style.background]="myStyle">
  <div id="0-0">
    <p>Point {{levelOne}}</p>
  </div>
  <div id="0-1" (click)="myStyle = 'red'">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod  </li>
  </div>
  <div id="0-2" (click)="myStyle = 'blue'">
    <li >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod. </li>
  </div>
  <div id="0-3" (click)="myStyle = 'green'">
    <li>
      Lorem ipsum dolor sit amet, 
    </li>
  </div>
  <div id="0-4" (click)="myStyle = 'orange'">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing</li>
        <li>lorem ipsum dolor</li>
  </div>
  <div id="0-5" (click)="myStyle = 'magenta'">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing</li>
  </div>
</div>

Компонент

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "example",
  templateUrl: "./example.component.html"
})
export class Example implements OnInit {

  public levelOne: Number = 1;
  public levelTwo: Number = 3;
  public levelThree: Number = 9;
  public LevelFour: Number = 27;

  myStyle = 'inherit';

  public selected = false;

  constructor() {}

  ngOnInit() {}

В качестве альтернативы, если вы хотите уменьшить количество прослушивателей событий, которые вы добавляете на свою страницу, вы можете просто установить один прослушиватель событий в родительском div и использовать идентификаторы $ event.target для проверки целевого дочернего div, и установить строку на основе этой цели.

  <div class="tableRow" [style.background]="myStyle" (click)="setStyle($event)">

Затем просто добавьте func в ваш компонент, аналогичный тому, который у вас уже есть

select($event) {
  let id = ($event.target as HTMLElement).id;
  // here you could add a a switch case that sets the myStyle string based on the id of the clicked element

Answer 2

Обычно это плохая практика (по слишком многим причинам перечислять здесь), чтобы получить доступ к DOM напрямую при использовании angular. Вы можете делать практически все с помощью инструментов, предоставляемых Angular, например, привязки свойств элемента:

<div [class.selected]="div1Selected" (click)="div1Selected = !div1Selected">
    Has class `selected` when component's property `div1Selected` is true.
</div>