时间戳

首页 > 解决方案 > Angular TypeScript如何查看父组件中动态生成的子组件的特定值

angular - Angular TypeScript如何查看父组件中动态生成的子组件的特定值

问题描述

我有一个名为“测验”的父组件。在这个组件中，我根据来自服务的索引值（我在初始化程序中订阅）生成多个子组件实例。

这是父级的 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>

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

这是添加问题的子（问题）组件的 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。

标签： angulartypescript

解决方案

在我看来，你有两个选择：

  1. 使用输入/输出属性并让您的子组件发出您在父组件中做出反应的事件，这里有一些关于该的文档
  2. 如果您觉得 REDUX 会发展到使用输入/输出属性将变得难以维护和跟踪的程度，请在您的应用程序中实施 REDUX，这里有一些很好的文档。

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

推荐阅读