javascript - Angular 6-直接父组件而非页面组件中的调用函数

我正在使用angular 6创建选项卡模块。我将其分为两个部分，标签栏和标签。

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

单击选项卡时，它会发出tabSelected，然后应触发选项卡栏组件内的selectTab。我的问题是tabSelected尝试在页面模块而不是在标签栏模块（其直接父级）内触发。

我希望有人可能知道我在这里做错了什么？

最佳答案

目前看来，单击后它尝试在所有提供的代码所在的组件上调用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>