Question

我正在尝试从子组件中选择父组件中的元素。

在我的子组件中，我有以下代码：

 removeItem(outcome) {
    const el = (<HTMLInputElement>document.getElementById(outcome.id));
    el.classList.remove("selected-bet");
    //...
  }

我想要选择的项目是父组件中的id（outcome.id）：

     <ng-container *ngFor="let outcome of market.Outcomes">
          <div class="market-cell-3" id="{{outcome.id}}">
            <span class="market-name">{{ outcome.name}}.</span>
          </div>
     </ng-container>

当我尝试上面的代码时，el总是 null ，我收到以下错误

BetSlipComponent.html：78 ERROR TypeError：无法读取null的属性'classList'

这样做的正确方法是什么？

提供有关应用程序结构的更多详细信息：父控制器显示运动市场列表，子组件就像购物车。当用户选择父母中的市场时，添加（选择 - 下注）类并将其添加到购物车。购物车中有一个删除按钮（removeItem（结果）），从那里我遇到了问题。

Answer 1

使用Angular时，请勿尝试手动触摸DOM。每个级别都错了。例如，您可以绑定到这样的元素类：

client.edit_2fa(new_password='12345')

Answer 2

我实际上从here找到了一些帮助。虽然它有效，但我并不相信它是正确的方法。我在子组件中使用了一个Output EventEmitter来将id发送给父组件：

@Output() removeBetSelected = new EventEmitter<number>();

在removeItem（）中我添加了这个：

this.removeBetSelected.emit(outcome.outcomeId)

将其添加到子组件

<bet-slip (removeBetSelected)=removeBetSelected($event)></bet-slip>

在父组件中我有这个函数，它从结果QueryList中找到正确的对象并删除该类：

@ViewChildren('outcome') outcomes:QueryList<any>;

  public removeBetSelected(outcomeId) { 
    const outcomeObj = this.outcomes.toArray().find(obj =>  obj.nativeElement.id == outcomeId );
    outcomeObj.nativeElement.classList.remove('selected-bet')
  }

虽然它有效，但这一切似乎只是为了删除一个类。肯定有更好的方法。

使用getElementById选择父组件中的元素 - Angular 5

2 个答案: