Angular:如何重置子组件

Question

我编写了一个 Java 后端，用作我的服务器并将提供所有数据。
前端是一个 Angular 8 应用程序。

我在 stackblitz 中创建了我的前端应用程序的剥离版本:
https://stackblitz.com/edit/angular-code-game

游戏由 1 个父组件 (GAME) 和 4 个(相同的)子组件 (COUNTER) 组成。
当我开始一个新的(实例)游戏时，我希望将计数器设置为它们的初始状态。

我做了一些研究，我认为我应该使用@ViewChild，但我不知道如何在我的父组件文件中重置我的 4 个子组件。

为了说明我的问题:

取消选择所有计数器上的数字，直到每个计数器剩下 1 个为止。

代码会填在底部(蓝色保险库框)

当您单击“开始新游戏”按钮时 -> 按钮应重置为其初始状态(绿色)

app.component.ts 里面应该有一些逻辑:

有谁知道如何解决这个问题？

Answer 1

因为你有多个，你可能想要 ViewChildren ...假设您的子组件有一些 reset()将它们置于初始状态的方法，请执行以下操作:

在 parent 中:

@ViewChildren(CounterComponent)
childGames: QueryList<CounterComponent>

resetAll() {
  this.childGames.forEach(c => c.reset()); // or whatever you want to do to it here
}

调用 resetAll()如所须。

这是一个示例 Blitz : https://stackblitz.com/edit/angular-code-game-aq7y5g?file=src/app/app.component.ts