Angular打字如何查看父母组件中动态产生的儿童的特定值

Question

我有一个名为'quiz'的父组件。在此组件中，我根据来自服务的索引值生成了几个子组件实例（我在初始化器中订阅）。

这是父（quiz）

的HTML代码

<div class="container">
  <div id="accordion" *ngFor="let item of quizFlowitemsArray; let key=index">
    <div class="card">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0"><button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">{{ item.name }}</button></h5>
      </div>
      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
        <div class="card-body">
          <app-question (questionFormValid)="childEventHandler($event)"></app-question> // child component
        </div>
      </div>
    </div>
  </div>
  <div class="margin-20"><button type="submit" class="btn btn-primary btn-block pull-right" style="font-weight: bold" [disabled]="!isQuestionFormValid">Add</button></div>
  <div class="clearfix"></div>
</div>

在名为"问题"的子组件中，有一个formGroup。此表格是动态的 - 在我的情况下，这意味着您可以在此表格中添加一个问题或删除。这导致了一系列问题。

这是添加问题的孩子（问题）组件的TS代码

  addQuestion() {
    const control = <FormArray>this.addQuestionsForm.controls['questions'];
    control.push(this.initQuestions());
    console.log(control);
  }
  initQuestions(){
    return this.fb.group({
      name: ['', [Validators.required, Validators.minLength(5)]],
      qtype: ['', [Validators.required]],
      value: ['', [Validators.required]]
    });
  }

我现在需要每个孩子组件中的父组件中的问题（命名控制），因为生成的每个孩子都可以具有大小和内容变化的问题列表。最终，我想将此数组附加到二维数组，以便索引代表子组件" ID"。我应该如何最好地处理？

我可以在必要时提供更多代码或PLNKR。

Answer 1

我认为您有两个选择：

1. 使用输入/输出属性，并让您的孩子组件散发出您在父部件中反应的事件，以下是该文档
2. 如果您觉得它会增长到使用输入/输出属性会变得太难维护并保持跟踪的程度，请在应用程序中实现redux。

我个人更喜欢在大多数应用程序中使用Redux，尽管我认为这对一个小项目不值得。