Angular2：@Output和事件發射

Question

我想按照這個：http://learnangular2.com/outputs/

這裏是我有：

account.component.html

<app-messagerie (onViewMessages)="handleOnViewMessages($event)"></app-messagerie> 
<a (click)="onViewMessagerie(users.id)">My messages</a> 

account.component.ts

import { Component, Output, EventEmitter } from '@angular/core'; 

export class AccountComponent implements OnInit { 

    @Output() onViewMessages = new EventEmitter(); 

... 

onViewMessagerie(id){ 
    this.onViewMessages.emit(id) 
} 

messagerie.component.ts

handleOnViewMessages(id){ 
    console.log(id); 
    console.log('ahah'); 
} 

但是當我點擊時沒有任何事情發生。

我錯過了什麼，或者做錯了什麼？

感謝

Answer 1

你混了父母和孩子組成部分。 Account component是父項，所以它應該包含handleOnViewMessages()方法。 messagerie component是孩子，它應該有@Output裝飾器通過事件發射器與父母通信。

account.compoent.html

<app-messagerie (onViewMessages)="handleOnViewMessages($event)"></app-messagerie> 

account.compoent.ts

export class AccountComponent implements OnInit { 

.... 

handleOnViewMessages(event){ 
    console.log(event); 
    console.log('ahah'); 
} 

messagerie.component.ts

@Output() onViewMessages = new EventEmitter(); 

... 

onViewMessagerie(id){ 
    this.onViewMessages.emit(id) 
} 

個messagerie.html

<a (click)="onViewMessagerie(users.id)">My messages</a> 

你雖然需要管理user.id，因爲我無法看到完整的代碼。