Angular 角度：如何重置子组件

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

我在stackblitz中创建了一个精简版的前端应用程序：

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

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

为了说明我的问题：

• 取消选择所有计数器上的数字，直到每个计数器都剩下1个
• 代码将在底部填充（蓝色保险库框）
• 当您点击“开始新游戏”->按钮时，按钮应重置为初始状态（绿色）

app.component.ts中应该有一些逻辑：

---

任何知道如何修复此问题的人？

在子类中创建一个方法来重置子类，然后您可以在父视图中调用它。添加对子对象的引用，然后在（单击）事件中使用它来调用它自己的方法

<div class="pageBox">
  <div class="top">
    <div class="title">Vaultcracker</div>

    <div>
      <div class="gameButtons">
        <!-- When starting a new game, the counters should be all green again. -->
        <div (click)="child1.initialise(); child2.initialise(); child3.initialise(); child4.initialise()">Start a new game</div>
        <div (click)="getClue()">Get a new clue</div>
      </div>
      <p *ngIf="result">{{result.message}}</p>

      <div class="counters">
        <app-counter #child1 name="A" (counterResult)="checkCounter('A', $event)"></app-counter>
        <app-counter #child2 name="B" (counterResult)="checkCounter('B', $event)"></app-counter>
        <app-counter #child3 name="C" (counterResult)="checkCounter('C', $event)"></app-counter>
        <app-counter #child4 name="D" (counterResult)="checkCounter('D', $event)"></app-counter>
      </div>

      <ul class="clues" *ngIf="clues">
        <li *ngFor="let clue of clues">
          <!-- Clues are dummies -->
          <p>{{ clue }}</p>
        </li>
      </ul>
    </div>
  </div>
  <div class="bottom">
    <div class="safe">
      <div class="case"></div>
      <div class="code">
        <span>{{ code.A }}</span>
        <span>{{ code.B }}</span>
        <span>{{ code.C }}</span>
        <span>{{ code.D }}</span>
      </div>
      <div class="lock" (click)="openVault()">OPEN</div>
    </div>
  </div>
</div>

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

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.scss']
})
export class CounterComponent implements OnInit {

  @Input() name;
  @Output() counterResult = new EventEmitter<string>();
  counter = {};

  constructor() {
  }

  ngOnInit() {
    this.initialise();
  }

  initialise() {
    this.counter = {
    0: 'on',
    1: 'on',
    2: 'on',
    3: 'on',
    4: 'on',
    5: 'on',
    6: 'on'
  };
  }

  click(i) {
    this.counter[i] = this.counter[i] === 'on' ? 'off' : 'on';
    Object.values(this.counter);

    if (this.filterByValue()) {
      this.counterResult.emit(Object.values(this.counter).indexOf('on').toString());
    }
  }

  filterByValue() {
    return Object.values(this.counter).filter(data => data === 'on').length === 1;
  }

}

金球奖得主
开始新游戏
获得新线索
{{result.message}



{{clue}}



{{code.A}}
{{code.B}
{{code.C}}
{{code.D}
打开
从“@angular/core”导入{Component，EventEmitter，Input，OnInit，Output}；
@组成部分({
选择器：“应用程序计数器”，
templateUrl:“./counter.component.html”，
样式URL:['./counter.component.scss']
})
导出类计数器组件实现OnInit{
@输入（）名称；
@Output（）counterResult=neweventemitter（）；
计数器={}；
构造函数（）{
}
恩戈尼尼特（）{
这个。初始化（）；
}
初始化（）{
此计数器={
0:'在'，
1:"关于",，
二:"关于",，
3:"关于",，
四:"在",，
五:"在",，
6:‘开’
};
}
点击（一）{
this.counter[i]=this.counter[i]='on'？'off'：'on'；
对象值（此计数器）；
if（this.filterByValue（））{
this.counterResult.emit（Object.values（this.counter）.indexOf（'on'）.toString（））；
}
}
filterByValue（）{
返回Object.values（this.counter）.filter（data=>data=='on'）。length==1；
}
}

由于您有多个孩子，您可能需要查看孩子们。。。假设您的子组件上有一些将其置于初始状态的

reset（）

方法，请执行以下操作：

在父项中：

@ViewChildren(CounterComponent)
childGames: QueryList<CounterComponent>

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

@ViewChildren（计数器组件）
儿童游戏：QueryList
resetAll（）{
this.childGames.forEach（c=>c.reset（））；//或者您想在这里对其执行的任何操作
}

根据需要调用

resetAll（）

---

这是一个闪电战示例：

谢谢！这就是我一直在寻找的解决方案。谢谢！这就是我一直在寻找的解决方案。谢谢！这就是我一直在寻找的解决方案。非常感谢！你救了我：D