angular 5获取子组件的输入值

Question

你好，这是我的第一个有角度5的项目

我正在使用表单来创建多个检察官的问题，因此我在ProsecutorsComponent上创建了关于CreateIssueComponent和Prosecutors（它应该是输入数组）数据的一般信息

第一：我想在CreateIssueComponent上提交表单时获取ProsecutorsComponent的输入值？第二：我想知道为什么要把检察官作为一系列的输入，并且回报就像

检察[1] [名称]

检察官[1] [邮件]

检察[2] [姓名]

检察官[2] [邮件]

检察官部分（儿童）

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（parent）

<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>

prosecutors.component.html（儿童）

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

我试图删除任何无用的代码，尽可能清楚地说明

问候

Answer 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 = '[e-mail]';
    this.prosecutors.push(this.prosecutor);
    ...
}

如果有任何问题，我希望它可以帮助您发表评论