在父级中重复组件时，对子组件进行自定义和调用方法

Question

我刚好进入Angular 2个星期，所以请多多包涵。

上下文

我有一个父组件，可以从服务中获取一个句子。父组件将遍历此句子（单词列表），将每个单词传递到子单词组件以进行渲染。

目标

我有一个包含按钮元素的单词组件。想法是，该组件将能够具有允许父组件自定义以css样式传递的word组件并调用诸如Disable / Enable / Show / Hide之类的方法的功能。

问题

作为一个新手，我有点陷入两种带有子组件的通信模型之间。 @ Input / @ Output自定义子组件，但需要@ViewChildren调用该子组件上的方法。结果，我对如何在子单词组件的特定实例上调用动作感到困惑。当子组件上发生事件时，我可以使用关键字“ this”，因此onClick（）方法中捕获的任何功能都将针对正确的组件。但是，我的HideButton（）和ShowButton（）与事件没有关联，因此不会具有正确的上下文。如果我将HideButton / ShowButton方法扩展为获取ID然后搜索DOM，则在这种情况下让混合了引用其实例的组件的混合物混合，然后捕获常规组件行为似乎是一种不好的方法，然后在DOM中搜索元素根据它的ID。根据这个目标，有人可以为我指出正确的方向，以实现我要实现的目标。谢谢您的宝贵时间。

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属性，并为其指定一个#identifier。然后，我可以使用@ViewChildren访问正确的组件并在 this 关键字具有上下文的位置上调用该方法。