Angular 2 - 在子組件中訪問ng內容投影中的內容和事件

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