Angular2 EventEmitter Не работает и никаких ошибок

Question

Я пытаюсь испустить простое событие, и я не могу заставить его работать.

import {Component, Input, Output, EventEmitter} from '@angular/core' 
import {MenuService} from "./menu.service"; 


    @Component({ 
     selector:'side-menu', 
     templateUrl:'component.html', 
    }) 

    export class SideMenuComponent { 

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

     //Show and Hide the Detail Pane 
     detailPanePinned = false; 
     detailPaneVisible = false; 

     pinMenuClick(){ 
      this.detailPanePinned = !this.detailPanePinned; 
      this.detailPaneVisible = !this.detailPaneVisible; 

      this.pinnedChange.emit({ 
       detailPanePinned: this.detailPanePinned 
      }) 

     } 

    } 

Вот это HTML были я пытаюсь слушать за это

<side-menu class="side-block pull-left"> 

</side-menu> 
<design-pane (change)="onPinnedChange($event)"></design-pane> 
<side-menu class="side-block pull-right"> 
</side-menu> 

А вот компонент для HTML выше

import {Component} from '@angular/core' 

@Component({ 
    selector:'builder-layout', 
    templateUrl:'app/builder/layout/layout.component.html' 
}) 

export class BuilderLayoutComponent { 

    onPinnedChange($event){ 
     console.log($event) 
    } 
} 

Когда я нажимаю pinMenuClick я не получаю какой-либо ошибка. Это как раз не попало мой onPinnedChange()

Я использую Angular2 2.0.0 официального

Answer 1

Я считаю, что только компонент, который излучает событие может слушать, в вашем случае, боковое меню. Поэтому вам нужно сделать что-то вроде этого:

<side-menu (pinnedChange)="onPinnedChange($event)"></side-menu>