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，但是当我单击div id中的li元素时，将设置为undefined ...但是如果我记录 $ event。 target.parentElement.id 到控制台时，它会在单击li元素时打印正确的ID。

我很确定如果我可以获得点击时捕获的正确ID我可以使用它来指定样式（例如更改div的背景颜色）

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

Answer 1

通常，使用angular时直接访问dom是不好的做法（因为列举的原因太多）。你可以使用Angular提供的工具做很多事情，元素属性绑定例如：

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

Answer 2

我只想使用样式绑定将您想要的任何样式绑定到父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 id来检查目标子div，并根据该目标设置字符串。

  <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

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

2 个答案: