Angular 2 - 从子组件中的 ng-content 投影访问内容和事件

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

Angular 2 - 从子组件中的 ng-content 投影访问内容和事件

Angular 2 - Accessing content and events from ng-content projection in child component

angular2-ngcontent

angular