角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