Настройка и вызов методов для дочернего компонента при повторении компонента в родительском компоненте.

Question

Я буквально 2 недели в Angular, поэтому, пожалуйста, потерпите меня.

Context

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

Цель

У меня есть компонент словакоторый содержит элемент кнопки.Идея заключалась в том, что этот компонент сможет иметь функциональность, которая позволит родительскому компоненту настраивать компонент слова, передаваемый в стилях CSS, а также вызывать такие методы, как Disable / Enable / Show / Hide.

Проблема

Как новичок, я застрял между двумя типами коммуникационной модели с дочерним компонентом.@ Input / @ Output для настройки дочернего компонента, но требуется @ViewChildren для вызова методов этого дочернего компонента.В результате я как-то путаюсь с тем, как вызывать действия для конкретного экземпляра дочернего компонента word.Я могу использовать ключевое слово «this», когда событие происходит в дочернем компоненте, и поэтому любые функции, захваченные в моем методе onClick (), будут нацелены на правильный компонент.Однако мои HideButton () и ShowButton () не связаны с событием, и это не будет иметь правильный контекст.Если я разверну методы HideButton / ShowButton для получения идентификатора, а затем выполню поиск в DOM, то это просто плохой подход, когда эта смесь компонента ссылается на его экземпляр в событиях с этим, а затем фиксирует общее поведение компонента, ищет в DOM элементна основании его идентификатора.Исходя из цели, кто-то может указать мне правильное направление для достижения того, чего я пытаюсь достичь.Спасибо за ваше время.

word.component.html

<button type="button" class="{{buttonClass}}" id="{{word.id}}" [disabled]="disabled">{{word.value}}</button>

word.component.ts

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

@Component({
  selector: 'word',
  templateUrl: './word.component.html',
  styleUrls: ['./word.component.css'],
  host: { '(click)': 'onClick($event)'}
})
export class WordComponent implements OnInit {

  @Input() word: Word;
  @Input() visibleCSSClass: string;
  @Input() invisibleCSSClass: string;

  @Output() selectedWord = new EventEmitter<Word>();

  disabled: boolean;
  buttonClass : string;

  constructor() { }

  ngOnInit() {
    this.buttonClass = this.visibleCSSClass;
    this.disabled = false;
  }

  public onClick(event: Event) 
  {    
    if(this.ButtonIsVisible())
    {
      this.HideButton();
      this.selectedWord.emit(this.word);
    }
  }

  private ButtonIsVisible()
  {
     return this.buttonClass === this.visibleCSSClass;
  }

  public HideButton()
  {
    this.buttonClass = this.invisibleCSSClass;
  }

  public ShowButton()
  {
    this.buttonClass = this.visibleCSSClass;
  }

  public EnableButton()
  {
    this.disabled = false;
  }

  public DisableButton()
  {
    this.disabled = true;
  }

(родительский компонент) parent.component.html

...

<ng-container>
      <ng-container *ngFor="let word of sentence | shuffle; last as isLast">
        <word [word]="word" [invisibleCSSClass]="'invisibleCSSClass'" [visibleCSSClass]="'visibleCSSClass'" (selectedWord)="wordSelected(word)" id="{{word.id}}"></word>
        <span *ngIf="!isLast">&nbsp;</span>
      </ng-container><br/><br/> 
      <button (click)="onSubmitClick()">Submit</button><br/><p></p>
    </ng-container>
    
...

ОБНОВЛЕНИЕ Мне нужно было добавить атрибут id к компоненту word, а также присвоить ему идентификатор #identifier.Затем я мог бы использовать @ViewChildren для доступа к нужному компоненту и вызова методов, где ключевое слово this имело контекст.