Angular 2 — доступ к контенту и событиям из проекции ng-content в дочернем компоненте

Я делаю боковую панель в 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, и изменить отображение списка?

Есть ли другой способ сделать многоразовый складной в боковой панели? Скажи мне, если мой подход неверен.


angular angular2-ngcontent
person Pavitra Gupta    schedule 26.02.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете предоставить услугу в 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, например, о том, что он отображается как выбранный.

Пример планкера

person Günter Zöchbauer    schedule 26.02.2017