6

我有 2 个组件，一个“创建”组件和一个子“表单”组件。我需要表单组件将提交事件与表单数据一起传递。

真正的问题是当我记录收到的事件时，我得到 2，而不是一个事件/参数。这是它记录的内容：Event {isTrusted: true}然后Contact {name: inputName}

如何过滤事件，以便仅在收到 Contact 对象时采取行动？

父“创建”组件：

import {Component, OnInit } from 'angular2/core';
import {Contact} from './contact';
import {ContactFormComponent} from './contact-form.component';

@Component({
    selector: 'contact-create',
    template: `
      <h2>Nuevo contacto</h2>

      <div class="panel panel-default">
        <div class="panel-body">

          <contact-form [contact]="contact" (formSubmitted)="saveContact($event)"></contact-form>

        </div>
      </div>
    `,
    directives: [ContactFormComponent]
})
export class ContactCreateComponent {

  contact: Contact = new Contact('');

  constructor(
      private router: Router,
      private contactService: ContactService) { }

  saveContact(args) {
    console.log(args);
  }
}

子“表单”组件

import {Component, EventEmitter} from 'angular2/core';
import {NgForm}    from 'angular2/common';
import {Contact}   from './contact';

@Component({
  selector: 'contact-form',
  inputs: ['contact'],
  outputs: ['formSubmitted'],
  templateUrl: 'app/contacts/contact-form.component.html',
})
export class ContactFormComponent {

  contact: Contact;
  formSubmitted: EventEmitter<any> = new EventEmitter();

  onSubmit(contact) { this.formSubmitted.next(contact); }
}
4

1 回答 1

9

作为参考和添加更多信息，请注意问题中的输出名称最初与DOM 提交事件submit匹配（由于我在第一条评论中没有解释问题，OP 在问题中将其重命名）所以最初的问题是组件正在捕获两个事件：由 OP 定义的输出和表单中的事件。

有一个问题（请参阅#4059）跟踪此行为。这显然不应该发生。

在充分尊重@Sasxa 的情况下，真正的解决方案是将输出重命名为不匹配 DOM 提交事件，直到实现上述问题。

于 2016-02-22T19:28:10.197 回答