2016-03-01 114 views
0

我使用角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」。但我期待 「事件接受」

+0

請添加更多信息。 'registrationComponent'的選擇器是什麼? –

回答

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

應該

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

<div>不發出logged事件。

0

我認爲將兩個組件鏈接在一起時(除了@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 "); 
        } 
    } 
    
+0

我正在加載我的應用程序組件中的註冊組件和消息組件<註冊>正在加載... 正在加載..

+0

這不是正確的方法:-(只設置你的主在你的HTML條目文件中加入一個'message-com'並引導它:'boostrap(MessageComponent);'。然後在你的'MessageComponent'中使用'registrationComponent'組件,事件只能由父組件捕獲,所以'MessageComponent'需要成爲'registrationComponent'的父代,這就是爲什麼你需要在'MessageComponent'裏面使用'registrationComponent' ... –

+0

我將getLoggedIn(){ } }代碼更改爲應用程序.componet.ts文件,是否有意義?那麼註冊是兒童a nd它將事件發送給父組件「app.component」。這個好嗎 ? –