Angular 6 - вызов функции в непосредственном родительском компоненте, а не в компоненте страницы

Question

Я использую Angular 6 для создания модуля вкладок. Я разделил его на два компонента: панель вкладок и вкладку.

  <tab-bar>
    <tab (tabSelected)="selectTab(1)"></tab>
    <tab (tabSelected)="selectTab(2)"></tab>
    <tab (tabSelected)="selectTab(3)"></tab>
  </tab-bar>

При нажатии на вкладку она выделяет tabSelected, которое затем должно вызывать selectTab внутри компонента панели вкладок. У меня проблема в том, что tabSelected пытается выполнить запуск в модуле страницы, а не в модуле панели вкладок (его непосредственный родитель).

Я надеюсь, что кто-то может знать, что я делаю здесь неправильно?

Answer 1

Если вы уверены, что хотите именно то поведение, которое вы описали (не перемещая вкладки в компонент панели вкладок), вы можете просто экспортировать ссылку на компонент / директиву в шаблон:

Таб-bar.component.ts

@Component({
   ...
   exportAs: 'tabBar'
})

Затем в вашем шаблоне используйте эту экспортированную ссылку как локальную переменную шаблона:

<tab-bar #tabBar="tabBar">
  <tab (tabSelected)="tabBar.selectTab(1)"></tab>
  <tab (tabSelected)="tabBar.selectTab(2)"></tab>
  <tab (tabSelected)="tabBar.selectTab(3)"></tab>
</tab-bar>

Answer 2

В настоящий момент кажется, что после щелчка он пытается вызвать метод selectTab для компонента, в котором находится весь предоставленный код. Я предполагаю, что вам нужно вызвать selectTab, который существует на tap-bar компоненте. Это означает, что вам нужно разместить вкладки внутри tapbar шаблона компонента.

Ваш tapbar.component.html должен включать это:

<tab (tabSelected)="selectTab(1)"></tab>
<tab (tabSelected)="selectTab(2)"></tab>
<tab (tabSelected)="selectTab(3)"></tab>

И в том месте, где вы хотите, чтобы ваши вкладки:

<tab-bar></tap-bar>