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 {
}

并制作items组件或从父

注入此服务的指令

@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投影的内容和事件

1 个答案: