角度2 - 子コンポーネントのコンテンツからのコンテンツおよびイベントへのアクセス

Question

私はangular2でサイドバーを作っています。

コード：

サイドバー（子）コンポーネントのテンプレート：

<div class="sidebar"> 
    <ng-content></ng-content> 
</div> 

親コンポーネントのテンプレート：

<app-sidebar> 
    <li> 
    <a data-toggle="collapsible-1">Menu-item</a> 
    <ul id="collapsible-1"> 
     <li>Sub-item 1</li> 
     <li>Sub-item 2</li> 
     <li>Sub-item 3</li> 
    </ul> 
    </li> 
</app-sidebar> 

サイドバーコンポーネントには、私はで書かれたコンテンツを投影しています親コンポーネントは<ng-content></ng-content>です。私が何をしたいか

：私はMenu-itemアンカータグをクリックすると

は、私はリストが（折りたたみ式のように、表示されたり消えたり）切り替えたいです。

私が試してみました何と問題：

私はアンカータグに(click)イベントを保ちました。しかしその場合、親コンポーネントで通知され、子コンポーネントではapp-sidebarコンポーネントでは通知されません。再利用性のために、私は機能が親コンポーネント内にあることを望んでいません。ユーザーがapp-sidebarコンポーネントのアンカータグをクリックしたときを知り、リストの表示を変更するにはどうすればよいですか？

サイドバーに再利用可能な折りたたみ可能な他の方法はありますか？私のアプローチが間違っているかどうか教えてください。

Answer 1

あなたはapp-sidebarでサービスを提供し、アイテム

@Component({ 
    selector: 'app-sidebar', 
    providers: [MyService], 
    template: ` 
    <ng-content></ng-content> 
    `, 
}) 
export class Sidebar { 
} 

にそれを注入し、項目コンポーネントまたは親

@Component({ 
    selector: 'sidebar-item', 
    template: ` 
    <ng-content></ng-content> 
    `, 
}) 
export class SidebarItem { 
    constructor(myService:MyService) { 
    console.log(myService); 
    } 
} 

この項目コンポーネントからこのサービスを注入指示を行うことができますSidebarのコンポーネントにクリックについての通知を行い、例えば、自分自身を選択したものとして表示するなど、Sidebarからの通知を購読することができます。

Plunker example