如何更改 Nativescript Angular 中每个选项卡的操作栏答案

【问题标题】：How to change Action bar for each Tab in Nativescript Angular如何更改 Nativescript Angular 中每个选项卡的操作栏
【发布时间】：2018-05-17 15:21:12
【问题描述】：

我有使用 Nativescript Angular 的 TabBar 应用程序。我想根据选定的选项卡更改操作栏按钮。我只是按照这个教程https://www.youtube.com/watch?v=7go3L70QfIQ

但是，不知道如何在 Angular 中使用 TabView.selectedIndexChangedEvent。如果有人这样做过，请分享这段代码。

谢谢

【问题讨论】：

标签： nativescript angular2-nativescript nativescript-telerik-ui

【解决方案1】：

使用this example 作为参考，了解如何在基于 Angular 的应用程序中使用 selectedIndexChange 事件。

例如：

<TabView selectedIndex="0"  (selectedIndexChange)="onIndexChanged($event)">
<!-- more code follows here -->

然后在组件文件中使用 onIndexChanged 回调

public onIndexChanged(args) {
    let tabView = <TabView>args.object;
    console.log("Selected index changed! New inxed: " + tabView.selectedIndex);
}

【讨论】：

嗨尼克，是的，我已经按照那个例子做了。我可以在 tab.component.ts 中获取标签索引。但我的问题是如何根据选定的标签索引更改导航栏项目。想想，我的应用有 3 个标签。每个选项卡都有不同的布局文件。现在，我想在第一个选项卡和相应的操作方法的操作栏上有“搜索”按钮。第二个标签的“编辑”按钮等等......我怎样才能做到这一点？
一旦你“附加”到selectedIndexChange，你就可以显示/隐藏预定义的ActionBar Items - 示例如下：docs.nativescript.org/ui/action-bar#hiding-action-items
是的，我可以在 Tab.component.ts 中做任何事情。但是如何检测子组件中的操作栏按钮点击方法？
如果用户点击（无论是进出ActionBar），您只需要跟踪被点击布局（例如Button）的tapEvent并在回调中实现逻辑。因此，如果您需要用户在点击 ActionBar 按钮时更改某些内容，而不是您需要访问所需的布局，例如通过 getViewById() 方法
Nick lliev 感谢您的帮助。我已经解决了这个问题。已发布答案。

【解决方案2】：

我使用 rxjs/Observable 通知解决了这个问题。逻辑是在选项卡更改发生时发布通知。根据标签索引，我可以决定操作栏按钮点击事件的方法。

    // send notify to child components
    let message = {
        "tabIndex" : this.tabIndex,
        "tappedButton" : "someButton"
    };
    this.notifyService.send(JSON.stringify(message));

【讨论】：