NativeScript和每个选项卡的单独导航栏（ActionBar）

我正在尝试在我的NativeScript应用程序中实现一个UI，该应用程序有两个选项卡，每个选项卡都有自己的导航堆栈。类似的模式也出现在一些应用程序中，比如照片应用程序。下面是一个演示：

使用NativeScript是否可以实现这一点？使用下面的代码（Angular 2），我最终在两个选项卡上共享了一个导航栏。仅保留第二个（标题附近）：

---

通过查看

nativescript angular

的源代码，我发现有一条指令将对

ngModel

的支持添加到

TabView

组件中。它将

ngModel

值同步到选项卡的

selectedIndex

，这意味着我们可以使用以下代码更新

ActionBar

标题属性：

<TabView [(ngModel)]="selectedTabIndex">

  <ActionBar
   [title]="selectedTabIndex === 0 ? homeTab.title : nearbyTab.title">
  </ActionBar>

  <StackLayout *tabItem="homeTab">
    <mp-home></mp-home>
  </StackLayout>

  <StackLayout *tabItem="nearbyTab">
    <Label text="Placeholder for Nearby"></Label>
  </StackLayout>

</TabView>

对于我的应用程序，我将确保选项卡栏仅在最上面的页面上可见，这避免了上述问题。
通过查看
nativescript angular
的源代码，我发现有一条指令将对
ngModel
的支持添加到
TabView
组件中。它将
ngModel
值同步到选项卡的
selectedIndex
，这意味着我们可以使用以下代码更新
ActionBar
标题属性：

<TabView [(ngModel)]="selectedTabIndex">

  <ActionBar
   [title]="selectedTabIndex === 0 ? homeTab.title : nearbyTab.title">
  </ActionBar>

  <StackLayout *tabItem="homeTab">
    <mp-home></mp-home>
  </StackLayout>

  <StackLayout *tabItem="nearbyTab">
    <Label text="Placeholder for Nearby"></Label>
  </StackLayout>

</TabView>



对于我的应用程序，我将确保选项卡栏仅在最上面的页面上可见，这避免了上述问题。
我无法使用
SelectedIndexValueAccessor
指令使其工作，因此我修改了另一个，希望有人发现它有用：

mainPage.html：

<ActionBar [title]="tabs[tabId].title" class="action-bar"></ActionBar>

<GridLayout>
    <TabView #tabview (selectedIndexChanged)="tabIndexChanged($event)">

      <StackLayout *tabItem="tabs[0]" >
          <first-tabview-item></first-tabview-item>
      </StackLayout>

      <StackLayout *tabItem="tabs[1]">
          <second-tabview-item></second-tabview-item>
      </StackLayout>

      <StackLayout *tabItem="tabs[2]">
          <third-tabview-item></third-tabview-item>
      </StackLayout>

    </TabView>
</GridLayout>

我无法使它与
SelectedIndexValueAccessor
指令一起工作，因此我修改了另一个指令，希望有人发现它有用：

mainPage.html：

<ActionBar [title]="tabs[tabId].title" class="action-bar"></ActionBar>

<GridLayout>
    <TabView #tabview (selectedIndexChanged)="tabIndexChanged($event)">

      <StackLayout *tabItem="tabs[0]" >
          <first-tabview-item></first-tabview-item>
      </StackLayout>

      <StackLayout *tabItem="tabs[1]">
          <second-tabview-item></second-tabview-item>
      </StackLayout>

      <StackLayout *tabItem="tabs[2]">
          <third-tabview-item></third-tabview-item>
      </StackLayout>

    </TabView>
</GridLayout>