Css 如何通过单击div元素的子元素（angular2/ts）将样式应用于div元素

HTML

TS

下面的代码在li元素外单击会导致id设置为实际id，但当我单击div id内的li元素时，id设置为undefined。。。但是，如果我将$event.target.parentElement.id记录到控制台中，它将在单击li元素时打印正确的id

我很确定，如果我能在点击时获得正确的ID，我可以用它来指定一个div的样式更改背景色

---

我不确定我做错了什么，或者总的来说有更好的方法吗？

通常在这里列出使用angular时直接访问dom的原因太多，这是一种不好的做法。您几乎可以使用Angular提供的工具执行任何操作，例如，元素属性绑定：

    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);
   }

  }

---

我只需要使用样式绑定将您想要的任何样式绑定到父div，然后使用子div单击来更改绑定到该样式的字符串的值

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

或者，如果希望减少添加到页面中的事件侦听器的数量，可以在父div上设置单个事件侦听器，并使用$event.target id检查目标子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() {}

---

只是读取MouseEvent目标的ID“直接访问DOM”吗？Angular和TypeScript本机支持MouseeEvent对象。你甚至可以相应地打字。选择$event:MouseEvent，然后TypeScript intellisense将精确显示该事件上可用的属性/方法Yes。这不是依赖元素id的角度方式。。通过这样做，您就失去了Angular中的许多实际功能，最好是学习如何实现这些功能，而不必求助于Angular。我通常理解不读取本机DOM属性的原因，但在什么替代环境下读取ID会有问题？你能不能检查一下目标是否是HTMLElement，它是否有ID，如果有，就使用它？如果没有，就采取其他的瞄准方法？我很好奇，我偶尔在自己的代码中使用这个方法，作为在ngFor循环中创建数千个单独事件侦听器或不同组件的替代方法。我通过编程将id绑定到id={{whatever}}唯一的对象，然后以w为目标，在*ngFor循环中，您可以将当前项传递给函数，例如*ngFor=let item of items click=clickeditem，假设您要更改单击项的样式，只需在item中切换一些标志，例如item.selected=！item.selected，然后可以将其绑定到样式类

<div [class.selected]="div1Selected" (click)="div1Selected = !div1Selected">
    Has class `selected` when component's property `div1Selected` is true.
</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 class="tableRow" [style.background]="myStyle" (click)="setStyle($event)">

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