如何在Angular2/TS中通过点击子元素为div元素应用样式

嘿，我来帮你搞定这个点击子元素给父级div加样式的需求～ 下面给你两种实用的实现方案，都是Angular项目里常用的方式：

方案一：数据绑定+模板变量（推荐，更符合Angular理念） #

这种方式通过组件变量控制样式，不用直接操作DOM，更贴合Angular的单向数据流模式。

步骤1：修改HTML模板 #

给父级的.tableRow添加模板变量#row，同时用[class.active]绑定样式类，点击事件直接传递这个模板变量：

<div class="tableRow" #row [class.active]="selectedRow === row">
  <div id="0-0">
    <p>Point {{levelOne}}</p>
  </div>
  <div id="0-1" (click)="select(row)">
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod </li>
    </ul>
  </div>
  <div id="0-2" (click)="select(row)">
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod. </li>
    </ul>
  </div>
  <div id="0-3" (click)="select(row)">
    <ul>
      <li> Lorem ipsum dolor sit amet, &...</li>
    </ul>
  </div>
</div>

注意：我把直接放在div里的li套进了ul标签，这是符合HTML规范的写法，避免潜在的样式或渲染问题哦～

步骤2：组件类实现逻辑 #

在你的组件.ts文件里定义selectedRow变量，以及点击事件的处理方法：

import { Component } from '@angular/core';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // 存储选中的行元素
  selectedRow: HTMLElement | null = null;

  select(row: HTMLElement): void {
    // 点击同一行时取消选中，否则切换选中状态
    this.selectedRow = this.selectedRow === row ? null : row;
  }
}

步骤3：定义样式类 #

在组件的CSS文件里添加active类的样式：

.tableRow.active {
  /* 这里写你要应用的样式，比如背景色、边框等 */
  background-color: #f5f5f5;
  border-left: 3px solid #2196F3;
}

方案二：直接操作DOM（适合简单场景） #

如果不想用组件变量，也可以通过事件对象找到父级元素，直接操作DOM添加/移除样式：

步骤1：HTML模板保留原点击事件 #

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

步骤2：组件类实现DOM操作逻辑 #

import { Component } from '@angular/core';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  select(event: MouseEvent): void {
    // 从点击元素向上查找父级的.tableRow元素
    const target = event.target as HTMLElement;
    const tableRow = target.closest('.tableRow') as HTMLElement;

    // 先移除所有.tableRow的active类（实现单选效果）
    document.querySelectorAll('.tableRow').forEach(row => {
      row.classList.remove('active');
    });

    // 给当前行添加active样式
    tableRow.classList.add('active');
  }
}

步骤3：同样添加样式类 #

和方案一的CSS代码一致，定义.tableRow.active的样式即可。

内容的提问来源于stack exchange，提问作者Eric Bezanson