Angular 角度类型脚本如何在父组件中查看动态生成的子组件的特定值

Angular 角度类型脚本如何在父组件中查看动态生成的子组件的特定值,angular,typescript,Angular,Typescript,我有一个名为“quick”的父组件。在这个组件中,我根据来自服务(我在初始值设定项中订阅)的索引值生成几个子组件实例 这是家长的HTML代码(测验) {{item.name} //子组件 添加 在名为“Question”的子组件中,有一个formgroup。这个表单是动态的——在我的例子中,这意味着你可以向这个表单添加一个问题或删除一个问题。这导致了一系列问题 这是添加问题的子(问题)组件的TS代码 addQuestion() { const control = <Form

我有一个名为“quick”的父组件。在这个组件中,我根据来自服务(我在初始值设定项中订阅)的索引值生成几个子组件实例

这是家长的HTML代码(测验)


{{item.name}
//子组件
添加
在名为“Question”的子组件中,有一个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]]
    });
  }
addQuestion(){
const control=this.addQuestionsForm.controls['questions'];
control.push(this.initQuestions());
控制台日志(控制);
}
初始问题(){
返回此.fb.group({
名称:['',[Validators.required,Validators.minLength(5)],
qtype:[''[Validators.required]],
值:[''[Validators.required]]
});
}
我现在需要访问父组件中每个子组件实例的问题数组(命名控件),因为生成的每个子组件都可以有大小和内容不同的问题列表。最后,我想将这个数组附加到一个二维数组中,以便索引表示子组件“id”。 我应该如何最好地处理这个问题


如果需要,我可以提供更多代码或plnkr。

我认为您有两种选择:

  • 使用输入/输出属性,并让您的子组件发出您在父组件中响应的事件
  • 如果您觉得应用程序的REDUX会发展到难以维护和跟踪输入/输出属性的地步,请在应用程序中实施REDUX

  • 我个人更喜欢在大多数应用程序中使用REDUX,尽管我认为它不值得为一个小项目而烦恼。

    我实际上已经观看了该视频,并发现它非常有用(正如您所看到的,我已经为另一个值实现了一个事件发射器)。虽然我的问题实际上更多的是针对如何获取包含该值的孩子的身份,如果这有意义的话。我如何知道哪个子实例正在向我传递哪个值?我确实觉得REDUX方法非常有趣,可能会(最终)实现它。然而,对于第一个版本,我很可能会保持简单,因为我已经走上了事件发射器的路线。非常感谢。我已经开始聊天了,因为它有点长,我看到您在使用*ngFor时已经将索引声明为键。现在我在子组件中要做的是创建一个索引输入属性@INPUT()index;然后,当您使用[index]=“key”对子组件进行排序时,这有意义吗?
      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]]
        });
      }