1

我正在 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组件中的锚标记，并更改列表的显示？

有没有其他方法可以在侧边栏中制作可重复使用的可折叠？告诉我我的方法是否错误。

4

1 回答 1

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组件有关点击的信息，并可以订阅来自Sidebarabout 的通知，例如将其自身显示为选中状态。

Plunker 示例

于 2017-02-26T17:15:05.167 回答