Question

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

  <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方法。我假设您需要调用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>

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>

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

2 个答案: