Angular 5中如何从子组件通过getElementById选择父组件元素

嘿，我明白你现在的困境——想在子组件里操作父组件通过*ngFor渲染的元素，但目前的代码找错了目标元素，而且直接操作DOM也不是Angular的最佳实践。我来给你捋捋正确的做法：

首先，说说你当前代码的问题 #

你现在用document.getElementById(outcome.id)去找的是HTMLInputElement，但实际目标是父组件里的<div class="market-cell-3">，这肯定找不到正确的元素。而且直接通过document操作DOM在Angular里并不推荐，因为Angular是数据驱动的框架，手动DOM操作很容易和Angular的变更检测冲突，还可能遇到元素未渲染、ID重复（如果outcome.id不唯一的话）等问题。

推荐方案：用数据绑定+组件通信（完全避免DOM操作） #

这是最符合Angular设计理念的方式，通过状态管理来控制元素的类，而不是手动操作：

1. 父组件维护选中状态
   在父组件里定义一个数组，用来记录选中的bet的ID：

   selectedBetIds: string[] = [];
   

2. 父组件绑定类到状态
   在*ngFor渲染的div上，通过[class]绑定来控制selected-bet类的显示：

   <div 
     class="market-cell-3" 
     id="{{outcome.id}}"
     [class.selected-bet]="selectedBetIds.includes(outcome.id)"
   >
     <!-- 你的内容 -->
   </div>
   

3. 子组件触发移除事件
   子组件里定义一个@Output事件，用来通知父组件要移除某个bet的选中状态：

   import { Output, EventEmitter } from '@angular/core';
   
   // ...
   
   @Output() removeBet = new EventEmitter<string>();
   
   removeItem(outcome) {
     // 触发事件，把要移除的ID传给父组件
     this.removeBet.emit(outcome.id);
     // 其他逻辑...
   }
   

4. 父组件监听事件并更新状态
   在父组件的模板里，监听子组件的removeBet事件，更新选中状态数组：

   <app-your-child-component (removeBet)="onRemoveBet($event)"></app-your-child-component>
   

   然后在父组件的ts里实现处理方法：

   onRemoveBet(id: string) {
     // 过滤掉要移除的ID，更新选中数组
     this.selectedBetIds = this.selectedBetIds.filter(betId => betId !== id);
   }
   

这样一来，完全不需要手动操作DOM，所有状态都由数据驱动，既安全又符合Angular的规范。

如果你确实需要直接操作DOM（不推荐，但提供备选方案） #

如果因为某些特殊原因必须直接操作父组件的元素，可以通过父组件传递元素引用的方式：

1. 父组件获取所有目标元素
   给父组件的div添加模板引用变量，然后用ViewChildren获取所有元素：

   import { ViewChildren, QueryList, ElementRef } from '@angular/core';
   
   // ...
   
   @ViewChildren('marketCell') marketCells: QueryList<ElementRef>;
   
   // 定义方法，让子组件可以通过ID获取对应的元素
   getMarketCellById(id: string): ElementRef | undefined {
     return this.marketCells.find(cell => cell.nativeElement.id === id);
   }
   

   模板里的div要加上#marketCell：

   <div 
     #marketCell
     class="market-cell-3" 
     id="{{outcome.id}}"
   >
     <!-- 你的内容 -->
   </div>
   

2. 父组件把方法传给子组件
   在父组件的模板里，把getMarketCellById方法通过@Input传给子组件：

   <app-your-child-component [getMarketCellById]="getMarketCellById"></app-your-child-component>
   

3. 子组件调用方法操作DOM
   子组件里接收这个方法，然后在removeItem里使用：

   import { Input } from '@angular/core';
   
   // ...
   
   @Input() getMarketCellById: (id: string) => ElementRef | undefined;
   
   removeItem(outcome) {
     const targetCell = this.getMarketCellById(outcome.id);
     if (targetCell) {
       targetCell.nativeElement.classList.remove("selected-bet");
     }
     // 其他逻辑...
   }
   

总结 #

优先选择数据驱动的方案，这是Angular的核心思想，能避免很多潜在问题。只有在万不得已的情况下，再考虑直接操作DOM的方式。

内容的提问来源于stack exchange，提问作者Jose the hose