6

「作成」コンポーネントと子「フォーム」コンポーネントの 2 つのコンポーネントがあります。フォーム データとともに送信イベントを渡すには、フォーム コンポーネントが必要です。

本当の問題は、受信したイベントをログに記録すると、1 つのイベント/引数ではなく 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 に答える