事件發射趕不上

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 "); 
      } 
  }