有没有办法检测多个 angular 组件的状态？

Question

我按照教程制作了一个 Tic-Tac-Toe 应用程序，现在正尝试自己添加更多功能。

平局条件是我遇到的主要障碍。 tic tac toe 网格中的每个图块都是它自己的 Angular 使用 *ngFor 指令创建的组件。这是代码。

<app-square 
        *ngFor="let val of squares; let i = index" 
        [value]="val"
        (click)="makeMove(i)"> 

    </app-square>

单击后，按钮会检查是否存在预先存在的值，如果不存在，则根据轮到谁来应用值（X 或 O）。

我尝试过使用基于点击计数的方法，但 none 已经失败了。此外，获胜条件的设计使得如果变量“winner”不再为空，它将宣布 winner 变量中的任何内容。这是相关代码。

<h2 *ngIf="winner">
    Player {{ winner }} won the game!
</h2>

有什么方法可以为每个按钮设计一个标志，用于检测它们是否都具有值，从而暗示游戏结果为平局？

Answer 1

你已经准备好了一切。只是，在父组件中，为 squares 的数组添加额外的检查。如果它填充了 Ok 值，则将 winner 设置为 true。

它可能看起来像这样

this.winner = this.squares.every(x=>x===true)

使用您正在使用的值，而不是 true。

Is there a way to detect state of multiple angular components?