Angular: как сбросить дочерние компоненты

Question

Я написал Java бэкэнд, который используется в качестве моего сервера и будет обслуживать все данные. Фронтенд - это приложение Angular 8.

Я создал стриптиз-версию своего стриженного приложения в стриптизе: https://stackblitz.com/edit/angular-code-game

Игра состоит из 1 родительский компонент (GAME) и 4 (одинаковых) дочерних компонента (COUNTER). Когда я запускаю новую (экземпляр) игру, я хочу, чтобы счетчики были установлены в исходное состояние.

Я провел некоторое исследование и думаю, что должен использовать @ViewChild , но я не знаю, как я могу восстановить мои 4 дочерних компонента в файле родительского компонента.

Чтобы проиллюстрировать мою проблему:

• Отмените выбор чисел на всех счетчиках, пока не останется 1 из каждого.
• Код будет заполнен снизу (синее хранилище box)
• При нажатии на кнопку «начать новую игру» -> кнопки должны быть сброшены в исходное состояние (зеленый)

Должны быть некоторые логики c внутри app.component.ts:

Кто-нибудь, кто знает, как это исправить?

Answer 1

так как у вас есть несколько, вы, вероятно, захотите ViewChildren ... предположим, что у ваших дочерних компонентов есть какой-то метод reset(), который переводит их в исходное состояние, сделайте это:

в родительском:

@ViewChildren(CounterComponent)
childGames: QueryList<CounterComponent>

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

вызовите resetAll() по мере необходимости.

вот примерный блиц: https://stackblitz.com/edit/angular-code-game-aq7y5g?file=src / app / app.component.ts

Answer 2

Создайте метод в вашем дочернем классе, который выполняет сброс дочернего элемента, затем вы можете вызвать его в родительском представлении. Добавьте ссылку на дочерний элемент, а затем используйте ее в событии (click), чтобы вызвать собственный метод.

<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;
  }

}