2

我正在使用 Angular 6 创建一个选项卡模块。我把它分成两个组件，标签栏和标签。

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

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

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

4

2 回答 2

0

目前看来，单击后它会尝试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>
于 2018-09-05T14:48:04.347 回答
0

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

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>
于 2018-09-05T16:20:49.573 回答