カスタムイベントをキャッチできません

Question

私はカスタムイベントを発行することができましたが、別のコンポーネントでそのイベントをキャッチすることはできません。ここで

は、エミッタです：

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

@Component({ 
    selector: 'x-hamburger-button', 
    template: ` 
     <div (click)="toggleSidebar()"> 
      <i class="fa fa-bars"> 
       <a href="#"></a> 
      </i> 
     </div> 
     ` 
}) 

export class HamburgerButton { 
    @Output() toggled = new EventEmitter(); 
    toggleSidebar = function() { 
     this.toggled.emit(); 
     console.log('toggled.emit()'); 
    }; 
} 

、これは受信側コンポーネントである：

import { Component } from 'angular2/core'; 
import { HamburgerButton } from './hamburger-button.component'; 

@Component({ 
    selector: "x-sidebar", 
    template: ` 
     <div (toggled)="onToggled()" [ngClass]="{collapsed: collapsed}"> 
     </div> 
     ` 
}) 

export class Sidebar { 
    collapsed: boolean = false; 
    onToggled = function() { 
     this.collapsed = !this.collapsed; 
     console.log('event caught'); 
    }; 
} 

私は私のコンソール上toggled.emit()を得るが、何のevent caughtはありません。私が逃しているものは何ですか？

Answer 1

活字体を指しボタン（サイドバーを折りたたんだり展開したりします）。

代わりに、共通の親オブジェクト（Window）によって保持されているサービスインスタンスを挿入することによって、これらを結合しました。このサービスは、コンポーネントが購読することができ、観察sidebarToggled$を公開

import { Injectable } from 'angular2/core'; 
import { Subject } from 'rxjs/Subject'; 

@Injectable() 
export class SidebarService { 
    private sidebarToggledSource = new Subject(); 
    sidebarToggled$ = this.sidebarToggledSource.asObservable(); 

    toggleSidebar(collapsed: boolean) { 
     this.sidebarToggledSource.next({}); 
    } 
} 

：ここ

は方法です。

import { Component } from 'angular2/core'; 
import { NavigationBar } from './navigation-bar.component'; 
import { Sidebar } from './sidebar.component'; 
import { SidebarService } from './sidebar.service'; 

@Component({ 
    selector: 'x-window', 
    directives: [NavigationBar, Sidebar], 
    template: ` 
      <x-navigation-bar></x-navigation-bar> 
      <div> 
       <x-sidebar></x-sidebar> 
       <div class="content"></div> 
      </div> 
     `, 
    providers: [SidebarService] 
}) 

export class Window { 
    constructor (private sidebarService: SidebarService) { } 
} 

同じインスタンスは、子コンポーネントに注入される（他のproviders配列またはそれらを追加しないでくださいあなたがしている新しいインスタンスを取得します：SidebarServiceの新鮮なインスタンスは、Windowコンポーネントに注入されます親コンポーネントの1から切断）：！だから、

import { Component } from 'angular2/core'; 
import { SidebarService } from './sidebar.service'; 

@Component({ 
    selector: 'x-hamburger-button', 
    template: ` 
     <div (click)="toggleSidebar()"> 
      <i class="fa fa-bars"> 
       <a href="#"></a> 
      </i> 
     </div> 
     ` 
}) 

export class HamburgerButton { 
    constructor (private sidebarService: SidebarService) { } 
    toggleSidebar() { 
     this.sidebarService.toggleSidebar(true); 
    }; 
} 

と

import { Component } from 'angular2/core'; 
import { SidebarService } from './sidebar.service'; 

@Component({ 
    selector: "x-sidebar", 
    template: ` 
     <div [ngClass]="{collapsed: collapsed}"> 
      <ul> 
       <li>Menu Item 1</li> 
       <li>Menu Item 2</li> 
       <li>Menu Item 3</li> 
       <li>Menu Item 4</li> 
       <li>Menu Item 5</li> 
      </ul> 
     </div> 
     `, 
    styles: [ 
     ... 
    ] 
}) 

export class Sidebar { 
    collapsed: boolean = false; 
    constructor (private sidebarService: SidebarService) { 
     sidebarService.sidebarToggled$.subscribe(data => { 
      this.collapsed = !this.collapsed; 
      console.log('event caught'); 
     }); 
    } 
} 

、場合をクリックすると、のSidebarServiceが呼び出されます。その同じサービスの観察可能なsidebarToggled$からsubscribe dはSidebarのすなわちcollapsedプロパティがトグルされ、その機能を呼び出す必要があります持っている子コンポーネントに注入します（Windowで作成）ServiceSidebarの一つだけなので、Sidebarは、あります。 stylesセクションのngClassとSidebarの部分を折りたたんだり展開したりすると、このプロパティを使用できるようになりました。

Answer 2

慎重に変更内容を確認してください。
注は：サイドバーとハンバーグの間には親子関係がないのでこのコードは、私が発光し、イベントをキャッチする考えを放棄し

export class HamburgerButton { 
    @Output() toggled = new EventEmitter(); 
    toggleSidebar() {     //changed 
     this.toggled.emit('Angular2'); //value emitted 

    }; 
} 

---

@Component({ 
     selector: "x-sidebar", 
     template: ` 
      <x-hamburger-button (toggled)="onToggled($event)" [ngClass]="{collapsed: collapsed}">    //changed 
      </x-hamburger-button>  //changed 
      ` 
    }) 


export class Sidebar { 
    collapsed: boolean = false; 
    onToggled(value) {    //changed 
     this.collapsed = !this.collapsed; 
     console.log(value);   //Angular2 <-------- 
    }; 
}