如何在 nativescript 中定义默认的 TabView？答案

【问题标题】：How to define a default TabView in nativescript?如何在 nativescript 中定义默认的 TabView？
【发布时间】：2019-05-04 16:03:51
【问题描述】：

我使用 CLI 创建了一个新的 nativescript 项目并选择了“标签导航”。我现在有默认的 3 个选项卡，但我找不到如何使默认/选定选项卡成为最右边/中心选项卡。

我已经尝试过移动标签页，它总是最左边的标签页最先加载。

<TabView androidTabsPosition="bottom">

    <page-router-outlet
        *tabItem="{title: 'Home', iconSource: getIconSource('home')}"
        name="homeTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: 'Browse', iconSource: getIconSource('browse')}"
        name="browseTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: 'Search', iconSource: getIconSource('search')}"
        name="searchTab">
    </page-router-outlet>

</TabView>

【问题讨论】：

标签： javascript angular nativescript angular2-nativescript nativescript-angular

【解决方案1】：

试试这个

<TabView  [(ngModel)]="tabSelectedIndex"  androidTabsPosition="bottom">

    <page-router-outlet
        *tabItem="{title: 'Home', iconSource: getIconSource('home')}"
        name="homeTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: 'Browse', iconSource: getIconSource('browse')}"
        name="browseTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: 'Search', iconSource: getIconSource('search')}"
        name="searchTab">
    </page-router-outlet>

</TabView>

在你的 ts 文件中：

 public tabSelectedIndex: number=1; //for example

希望对你有帮助。

【讨论】：

【解决方案2】：

使用此代码。

1. app.component.html:-

 <TabView  [(ngModel)]="tabSelectedIndex"  androidTabsPosition="bottom">

 <page-router-outlet
    *tabItem="{title: 'Home', iconSource: getIconSource('home')}"
    name="homeTab">
 </page-router-outlet>

 <page-router-outlet
    *tabItem="{title: 'Browse', iconSource: getIconSource('browse')}"
    name="browseTab">
 </page-router-outlet>

 <page-router-outlet
    *tabItem="{title: 'Search', iconSource: getIconSource('search')}"
    name="searchTab">
 </page-router-outlet>

</TabView>

2。 app-routing.module.ts:-

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NSEmptyOutletComponent } from "nativescript-angular";
import { NativeScriptRouterModule } from "nativescript-angular/router";

const routes: Routes = [
{
    path: "",
    redirectTo: "/(homeTab:home/default//browseTab:browse/default//searchTab:search/default)",
    pathMatch: "full"
},
{
    path: "home",
    component: NSEmptyOutletComponent,
    loadChildren: "~/app/home/home.module#HomeModule",
    outlet: "homeTab"
},
{
    path: "browse",
    component: NSEmptyOutletComponent,
    loadChildren: "~/app/browse/browse.module#BrowseModule",
    outlet: "browseTab"
},
{
    path: "search",
    component: NSEmptyOutletComponent,
    loadChildren: "~/app/search/search.module#SearchModule",
    outlet: "searchTab"
}
];

@NgModule({
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

【讨论】：