事件发射赶不上

Question

我使用角2公测6

我的自定义事件没有逮住了

import {Component, OnInit, EventEmitter} from 'angular2/core'; 
import {NgForm} from 'angular2/common'; 
import {Output} from "angular2/core"; 
@Component({ 
    template: '<form class="form-horizontal" (ngSubmit)="onSubmit()" #registrationForm="ngForm" style="color: #676767"> 
     <button type="submit" >Send Event</button> 
    </form>' 

}) 
export class registrationComponent { 

    @Output() logged: EventEmitter<any> = new EventEmitter(); 

    onSubmit() { 
     console.log(Button clicked); 
     this.logged.emit(null); // Emits an event on clicking the button 
     } 

} 

我添加了另一个分量与监听记录我的事件。

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'message-com', 
    template: '<div (logged)="getLoggedIn($event)">Hello<div>' 
}) 
export class MessageComponent { 


    getLoggedIn() { 

     alert("Event received "); 

    } 
} 

我在控制台中看到“Button clicked”。但我期待 “事件接受”

Answer 1

templateUrl: <div (logged)="getLoggedIn($event)">Hello<div>' 

应该

template: '<div (logged)="getLoggedIn($event)">Hello<div>' 

和<div>不发出logged事件。

Answer 2

我认为将两个组件链接在一起时（除了@Günter发现的问题）还有问题。您不要在MessageComponent之一中使用registrationComponent。这样您就无法赶上事件，因为registrationComponent实际上是在MessageComponent之一中使用的。

你应该重构你的两个组成部分是这样的：

• 添加选择的registrationComponent组件：

  import {Component, OnInit, EventEmitter} from 'angular2/core'; 
  import {NgForm} from 'angular2/common'; 
  import {Output} from "angular2/core"; 
  @Component({ 
      selector: 'registration', 
      templateUrl: 'views/registration.html' 
  }) 
  export class registrationComponent { 
      @Output() logged: EventEmitter<any> = new EventEmitter(); 
  
      onSubmit() { 
      this.logged.emit(null); 
      } 
  } 
  

• 在MessageComponent组件的directives属性设置registrationComponent，并用它由于其选择器：

  import {Component} from 'angular2/core'; 
  import {registrationComponent} from '...'; 
  
  @Component({ 
      selector: 'message-com', 
      template: ` 
      <registration (logged)="getLoggedIn($event)">Hello<registration> 
      `, 
      directives: [ registrationComponent ] 
  }) 
  export class MessageComponent { 
      getLoggedIn() { 
      alert("Event recieved "); 
      } 
  }