Angular 6 - 在直接父组件中调用函数，而不是页面组件

Question

我正在使用角度 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

目前，似乎在单击后，它尝试在所有提供的代码所在的组件上调用selectTab方法。我假设您需要调用tap-bar组件上存在的selectTab。这意味着您需要将选项卡放置在组件模板tapbar。

你的tapbar.component.html应该包括以下内容：

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

在您想要拥有选项卡的地方：

<tab-bar></tap-bar>

Answer 2

如果您确定要完全符合您所描述的行为(而不是将选项卡移动到选项卡栏组件(，则可以简单地将组件/指令引用导出到模板：

tab-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>