ClickイベントをAngular 2の別のコンポーネントにターゲティングするにはどうすればいいですか？

Question

main app.componentとheader.componentの2つのコンポーネントがあります。これで、クラスをメインにアクティブにするためのボタンをヘッダに挿入しますapp.componentアイブ氏はapp.componentで働いボタンを得たが、私は、ヘッダー・コンポーネントにボタンを移動したいが、同じ機能を持つ

HTML

<div> 
    <button type="button" id="sidebarCollapse" class="btn btn-primary" 
(click)="togglesideBar(); toggleSign();"> 
     <i class="glyphicon glyphicon-{{sign}}"></i> 
    </button> 
</div> 
<!--Chat Side Bar--> 
    <div id="chatsidebar" [ngClass]="{'active': isSideBarActive}"> 
     <app-chatsidebar></app-chatsidebar> 
    </div> 
</div> 

は

sign = 'chevron-right'; 

toggleSign() { 
    if (this.sign === 'chevron-right') { 
     this.sign = 'chevron-left'; 
    } else { 
     this.sign = 'chevron-right'; 
    } 
} 

togglesideBar() { 
    this.isSideBarActive = !this.isSideBarActive; 
} 

をAPP.COMPONENT.TS

同じ機能をheader.component.tsに入れて、同じボタンをheader.component.htmlに入れてみましたが、うまくいきませんでした。

助けてください！あなたのヘッダー・コンポーネントで構成see the angular docs

間の通信にイベントを使用することができます

Answer 1

あなたがクラスに

@Output() sidebarToggled = new EventEmitter<boolean>(); 

を持つEventEmitterプロパティを追加することができます おかげで、あなたのメインのアプリケーションコンポーネント

のイベントにバインド

<app-header (sidebarToggled)="onSidebarToggled($event)"></app-header> 

とapp.component.ts

onSidebarToggled(toggled: boolean) { 
    ... 
} 

これはあなたの状況に動作しない場合は、以下にデビンの答えはこれを行うための一つの方法である、両方のコンポーネント