angular 5 获取子组件的输入值答案

【问题标题】：angular 5 get value of input on child componentangular 5 获取子组件的输入值
【发布时间】：2018-06-06 02:15:40
【问题描述】：

你好，这是我的第一个 angular 5 项目

我正在处理表单，以便在其下与多位检察官创建问题所以我在 CreateIssueComponent 上做了一般信息和 ProsecutorsComponent 上的 Prosecutors（应该是输入数组）数据

首先：在 CreateIssueComponent 上提交表单时，我想获取 ProsecutorsComponent 的输入值吗？第二：我想知道为什么要把 Prosecutors 作为输入数组，而返回就像

检察官[1][姓名]

检察官[1][电子邮件]

检察官[2][姓名]

检察官[2][电子邮件]

ProsecutorsComponent（子）

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-prosecutors',
  templateUrl: './prosecutors.component.html',
  styleUrls: ['./prosecutors.component.css']
})
export class ProsecutorsComponent implements OnInit {

  @Input() index : number;

  constructor() { }

  ngOnInit() {
  }
}

CreateIssueComponent（父级）

  import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Response } from '@angular/http';

@Component({
  selector: 'app-create-issue',
  templateUrl: './create-issue.component.html',
  styleUrls: ['./create-issue.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class CreateIssueComponent implements OnInit {
  @ViewChild('f') issueInsert: NgForm;

  prosecutorsNoArray : number[] = [1];
  prosecutorsNoBinding : number = 1;

  constructor() {
  }

  ngOnInit() {
  }

  insertIssue(){
    console.log(this.issueInsert.value);
  }

  onchangeProsecutorsNo(){
    this.prosecutorsNoArray = Array(this.prosecutorsNoBinding).fill(1);
  }
}

create-issue.component.html（父级）

<form (ngSubmit)="insertIssue()" #f="ngForm">
    <div>
        <div>
            issue Name
            <input class="form-control m-input" type="number" name="Name" ngModel  #Name="ngModel" required>
        </div>
    <div>
        Prosecutors No
        <input class="form-control m-input" type="number" [(ngModel)]="prosecutorsNoBinding" (change)="onchangeProsecutorsNo()" name="prosecutorsNo" ngModel  #prosecutorsNo="ngModel" required>
    </div>
    <h3 class="parties">Prosecutors</h3>
    <app-prosecutors *ngFor="let prosecutor of prosecutorsNoArray; let i = index" [index]="i"></app-prosecutors>
</form>

检察官.component.html（子）

    <div>
        Prosecutors name
        <input class="form-control m-input" type="text" name="name_{{ index }}" ngModel #name="ngModel" required>
    </div>

我试图删除所有无用的代码以尽可能清楚地说明

问候

【问题讨论】：

标签： angular angular2-forms angular5 angular4-forms

【解决方案1】：

对于您的第一个问题，您可以使用 EventEmitter 遵循示例：

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'user-profile',
  template: '<div>Hi, my name is {{user.name}}</div>'
})
export class UserProfile {
  @Output() userUpdated = new EventEmitter();

  constructor() { // this can be any method that you want
    // Update user
    // ...
    this.userUpdated.emit(this.user);
  }
}

现在当我们在它的父组件中使用这个组件时，我们可以绑定用户配置文件发出的事件

template:
`...
<user-profile (userUpdated)="handleUserUpdated($event)"></user-profile>
...`

export class SettingsPage {
  constructor(){}

  handleUserUpdated(user) {
    // here *user* is equal to emitted value in *UserProfile*
  }
}

对于第二个问题，您可以这样做：

prosecutor: {
    name: string,
    email: string
};
prosecutors = [];

_method() {
    this.prosecutor.name = 'test';
    this.prosecutor.email = 'test@test.com';
    this.prosecutors.push(this.prosecutor);
    ...
}

如果有什么问题，希望对你有帮助

【讨论】：