如何同时使用具有事件发射器的同一子标签的多个副本。答案

【问题标题】：How to use multiple copies of same child tag having Event Emitter in it at the same time.如何同时使用具有事件发射器的同一子标签的多个副本。
【发布时间】：2017-09-09 19:54:13
【问题描述】：

我有一个通过事件发射器发射数据的子组件。发射数据与父级中的 ngModel 绑定。并且其中的发射方法是从父组件调用的。我创建了子组件，因为我有两个相同的表单。所以我创建了一个表单组件并使用了两次并与他们的数据绑定。

//Child Component Code
import {Component, EventEmitter, Input, Output} from 'angular2/core'

@Component({
  selector: 'child-component',
  template: `
    <input [ngModel]="formObj.title" >
  `
})
export class ChildComponent {
  @Input() formObject: Object;
  @Output() formObjectChange= new EventEmitter();

  emitChangeforParent() {
     this.formObjectChange.emit(newValue);
  }
 }

//Parent Component
 @Component({
    selector: 'parent-component',
    template: `
      <child-component[(formObject)]="doseObject1" #firstForm></child-component>
      <child-component[(formObject)]="doseObject2" #secondForm></child-component>
      <button (click)="save()">Save</button>
    ` 
  })
export class ParentComponent {
  doseObject1 ={title:''};
  doseObject2 ={title:''};

  save(){
     this.firstForm.emitChangeforParent();
     this.secondForm.emitChangeforParent();

     console.log(this.doseObject1);   //Updated data by child is available.But this works when i used single tag.

但是当我使用多个子标签时它不起作用 } }

问题是，每当我使用单一表单标签时，它都可以正常工作。孩子所做的更新反映在父母身上。但是当我两次使用相同的标签标签时，调用它的子类 emitChangeForParent() 方法不起作用。

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

我认为您可能对 emitChangeForParent 应该如何工作感到有些困惑。这种方法通常由子调用，由父使用。

因此子组件将具有 (change)="emitChangeForParent() ，然后在您将拥有的父组件上

基本上这意味着每当子组件调用emit时，它都会向上传递数据，并且父组件可以通过回调来捕获它。

但是，在这种情况下，我认为您不需要这样做。这对于像数字这样的值类型最有用。如果你传入一个引用类型，比如你的 json 对象 doseObject1 ={title:''}，那么父对象应该仍然有一个最新的引用。

我认为你需要做的就是让你的子组件模板成为“”，并使用盒子中的香蕉双重绑定语法。那么父级仍将始终具有doseObject1.title 和doseObject2.title 的准确值

【讨论】：

我知道它应该由子组件本身调用，但在我的情况下，我在父组件中有保存按钮，单击该按钮将调用子组件的对象，子组件已使用 ngModel 更改。

【解决方案2】：

无需发出数据。双绑定语法将子组件中所做的更改返回给父组件。

【讨论】：