加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Angular2:在EventEmitter中传递单个参数

发布时间:2020-12-17 17:21:40 所属栏目:安全 来源:网络整理
导读:我有2个组件,一个’创建’组件和一个子’形式’组件.我需要表单组件来传递submit事件以及表单数据. 真正的问题是当我记录收到的事件时,我得到2,而不是一个事件/ arg.这是它记录的内容:Event {isTrusted:true}然后是Contact {name:inputName} 如何过滤事件
我有2个组件,一个’创建’组件和一个子’形式’组件.我需要表单组件来传递submit事件以及表单数据.

真正的问题是当我记录收到的事件时,我得到2,而不是一个事件/ arg.这是它记录的内容: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); }
}

解决方法

供参考和添加更多信息请注意,在输出名称最初提交的问题与 DOM submit event匹配(由于我在 first comment中没有解释问题而在问题中将其重命名)所以最初的问题是该组件正在捕获两个事件:OP定义的输出和表单中的事件.

有一个问题(见#4059)跟踪此行为.这显然不应该发生.

对@Sasxa充分尊重的真正解决方案是将输出重命名为与DOM提交事件不匹配,直到实现上述问题为止.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读