使用 Class 向元素添加 eventListener

Question

我有这个挑战，我不知道如何实现 function 来获得方块上的点击事件。 我想用方形 class 获得每个按钮的点击事件。

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

@Component({
  selector: 'app-area',
  template: `
    <div id="statusArea" className="status">Next player: <span>X</span></div>
    <div id="winnerArea" className="winner">Winner: <span>None</span></div>
    <button id="reset">Reset</button>
    <section>
      <div class="row" *ngFor="let row of [1, 2, 3]">
        <button *ngFor="let col of [1, 2, 3]" class="square" style="width:40px;height:40px;"></button>
      </div>
    </section>
  `,
  styles: []
})

export class MainAppComponent implements OnInit {

  ngOnInit() { 
    const btn = document.getElementById('reset')
    const squares = Array.from(document.querySelectorAll('.square'))

    squares.forEach(square =>{
      square.addEventListener('click', function handleClicks(event){
        console.log('botão clicado');
      })
    })

    btn.addEventListener('click', function handleClick(event){
      console.log("clicado");
    })
  }
}

Answer 1

只是为了确保这一点很清楚：您不应该在 Angular 中使用 DOM。

该框架已经提供了添加事件、属性绑定和 HTML 选择的机制（还有很多东西）

在您的情况下，您试图手动添加单击事件，但框架通过简单地将(click)="onSquareClick()"添加到模板中的按钮元素来覆盖您。

<button *ngFor="let col of [1, 2, 3]" class="square" style="width:40px;height:40px;" (click)="onSquareClick()"></button>

如果你真的需要玩 DOM，Angular 引入了指令的概念以及一些在这种情况下可以派上用场的实用程序。
在这里你可以找到一些例子