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