angular 5 获取 child 组件的输入值

Question

你好，这是我与 angular 5

的第一个项目

我正在处理表格以在其下与多个检察官一起制造问题所以我在 CreateIssueComponent 上做了一般信息和 ProsecutorsComponent

上的 Prosecutors（它应该是输入数组）数据

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

检察官[1][姓名]

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

检察官[2][姓名]

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

检察官组件 (child)

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 (parent)

  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>

检察官。component.html (child)

    <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);
  }
}

现在当我们在它的父组件中使用这个组件时，我们可以绑定 user-profile 发出的事件

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);
    ...
}

如有问题希望对大家有所帮助

angular 5 获取 child 组件的输入值

angular 5 get value of input on child component

angular2-forms

angular

angular4-forms

angular5