Angular2:获取在 EventEmitter 中传递的单个参数
Angular2: get single argument passed in EventEmitter
我有 2 个组件,一个 'create' 组件和一个 'form' 子组件。我需要表单组件来传递提交事件和表单数据。
真正的问题是当我记录接收到的事件时,我得到 2 个,而不是一个 event/arg。这是它记录的内容:Event {isTrusted: true}
然后是 Contact {name: inputName}
如何过滤事件以便仅在收到联系人对象时才采取行动?
父 'create' 组件:
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);
}
}
子 'form' 组件
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); }
}
供参考和添加更多信息请注意,在问题中输出名称最初是 submit
匹配 DOM submit event (OP renamed it in the question because of my lack of explaining the issue in my ) 所以最初的问题是组件正在捕获两个事件:输出由 OP 和表单中的事件定义。
跟踪此行为存在问题(请参阅 #4059)。这显然不应该发生。
真正的解决方案,对@Sasxa 给予应有的尊重,是重命名输出以不匹配 DOM 提交事件,直到实现上述问题。
我有 2 个组件,一个 'create' 组件和一个 'form' 子组件。我需要表单组件来传递提交事件和表单数据。
真正的问题是当我记录接收到的事件时,我得到 2 个,而不是一个 event/arg。这是它记录的内容:Event {isTrusted: true}
然后是 Contact {name: inputName}
如何过滤事件以便仅在收到联系人对象时才采取行动?
父 'create' 组件:
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);
}
}
子 'form' 组件
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); }
}
供参考和添加更多信息请注意,在问题中输出名称最初是 submit
匹配 DOM submit event (OP renamed it in the question because of my lack of explaining the issue in my
跟踪此行为存在问题(请参阅 #4059)。这显然不应该发生。
真正的解决方案,对@Sasxa 给予应有的尊重,是重命名输出以不匹配 DOM 提交事件,直到实现上述问题。