Angular2 nativescript 选项卡视图中的两个列表视图don'；I don’我没有按预期工作

我有一个代码共享Nativescript项目。我在一个延迟加载的模块中使用了两个

ListView的
。延迟加载模块的结构使得当我从AppModule导航到该模块时

<TabView id="tabViewContainer">
    <page-router-outlet  actionBarVisibility="never"  *tabItem="{title: 'Players'}" name="playersTab"></page-router-outlet>
    <page-router-outlet  actionBarVisibility="never" *tabItem="{title: 'Event Requests'}" name="eventRequestsTab"></page-router-outlet>
</TabView>

现在我面临的问题是，当这两个列表视图并排显示时，有时两个列表视图都不显示任何内容，有时只有第二个选项卡显示数据，其中第一个选项卡仅显示项目分隔符，如下所示：-

案例1选项卡1

案例1选项卡2

案例2选项卡1

案例2选项卡2

项目总是有多个元素，但仍然会出现此问题

我尝试过使用函数
listview.refresh（）
，但仍然没有成功。我还使用了
ChangedDetectionStratergy.OnPush
，并在收到数据时调用
markedForRefresh
函数。我曾尝试使用由
Nativescript
提供的
observatarray
，但在使用时我有点困惑，而且我觉得它不适用于代码共享项目

从昨天开始我就很沮丧，它看起来像Nativescript中的一个bug。您能否帮助克服这一问题，使两个选项卡始终显示数据（知道数组始终至少有一个元素）？
两个listview在tabView中工作，例如：-

app.component.html:-

`<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>

</TabView>`

`import { Component, OnInit } from "@angular/core";

 import { isAndroid } from "tns-core-modules/platform";

@Component({
selector: "ns-app",

moduleId: module.id,

templateUrl: "app.component.html"
})
export class AppComponent implements OnInit {

constructor() {
    // Use the component constructor to inject providers.
}

ngOnInit(): void {
    // Init your component properties here.
}

getIconSource(icon: string): string {
    const iconPrefix = isAndroid ? "res://" : "res://tabIcons/";

    return iconPrefix + icon;
}
}

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptModule } from "nativescript-angular/nativescript.module";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
bootstrap: [
    AppComponent
],
imports: [
    NativeScriptModule,
    AppRoutingModule
],
declarations: [
    AppComponent
],
schemas: [
    NO_ERRORS_SCHEMA
]
})
export class AppModule { }

`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)",

    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"
}
];

@NgModule({

imports: [NativeScriptRouterModule.forRoot(routes)],

exports: [NativeScriptRouterModule]
})

export class AppRoutingModule { }

`<GridLayout class="page page-content">

<ListView [items]="items" class="list-group">

    <ng-template let-item="item">

        <ScrollView height="150">

            <Label [text]="item.name" class="list-group-item"></Label>

        </ScrollView>

    </ng-template>

</ListView>

</GridLayout>`

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

import { NativeScriptCommonModule } from "nativescript-angular/common";

import { HomeRoutingModule } from "./home-routing.module";

import { HomeComponent } from "./home.component";

import { ItemDetailComponent } from "./item-detail/item-detail.component";

@NgModule({

imports: [
    NativeScriptCommonModule,
    HomeRoutingModule
],

declarations: [
    HomeComponent,
    ItemDetailComponent
],

schemas: [
    NO_ERRORS_SCHEMA
]

})

export class HomeModule { }`

`import { NgModule } from "@angular/core";

import { Routes } from "@angular/router";

import { NativeScriptRouterModule } from "nativescript-angular/router";

import { HomeComponent } from "./home.component";

import { ItemDetailComponent } from "./item-detail/item-detail.component";

const routes: Routes = [

{ path: "default", component: HomeComponent },

{ path: "item/:id", component: ItemDetailComponent }

];

@NgModule({

imports: [NativeScriptRouterModule.forChild(routes)],

exports: [NativeScriptRouterModule]

})

export class HomeRoutingModule { }`

`<GridLayout class="page page-content">

<ListView [items]="items" class="list-group">

    <ng-template let-item="item">

        <ScrollView height="150">

            <Label [text]="item.name" class="list-group-item"></Label>

        </ScrollView>

    </ng-template>

</ListView>

</GridLayout>`

`import { Component, OnInit } from "@angular/core";
import { DataService, IDataItem } from "../shared/data.service";

@Component({
selector: "Browse",
moduleId: module.id,
templateUrl: "./browse.component.html"
})
export class BrowseComponent implements OnInit {

items: Array<IDataItem>;

constructor(private _itemService: DataService) { }

ngOnInit(): void {
    this.items = this._itemService.getItems();
}
}

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

import { NativeScriptCommonModule } from "nativescript-angular/common";

import { BrowseRoutingModule } from "./browse-routing.module";

import { BrowseComponent } from "./browse.component";

import { DataService } from "../shared/data.service";

@NgModule({
imports: [
    NativeScriptCommonModule,
    BrowseRoutingModule
],
declarations: [
    BrowseComponent
],
schemas: [
    NO_ERRORS_SCHEMA
],
providers:[
    DataService
]
})
export class BrowseModule { }`

`
app.module.ts:-

`<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>

</TabView>`

`import { Component, OnInit } from "@angular/core";

 import { isAndroid } from "tns-core-modules/platform";

@Component({
selector: "ns-app",

moduleId: module.id,

templateUrl: "app.component.html"
})
export class AppComponent implements OnInit {

constructor() {
    // Use the component constructor to inject providers.
}

ngOnInit(): void {
    // Init your component properties here.
}

getIconSource(icon: string): string {
    const iconPrefix = isAndroid ? "res://" : "res://tabIcons/";

    return iconPrefix + icon;
}
}

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptModule } from "nativescript-angular/nativescript.module";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
bootstrap: [
    AppComponent
],
imports: [
    NativeScriptModule,
    AppRoutingModule
],
declarations: [
    AppComponent
],
schemas: [
    NO_ERRORS_SCHEMA
]
})
export class AppModule { }

`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)",

    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"
}
];

@NgModule({

imports: [NativeScriptRouterModule.forRoot(routes)],

exports: [NativeScriptRouterModule]
})

export class AppRoutingModule { }

`<GridLayout class="page page-content">

<ListView [items]="items" class="list-group">

    <ng-template let-item="item">

        <ScrollView height="150">

            <Label [text]="item.name" class="list-group-item"></Label>

        </ScrollView>

    </ng-template>

</ListView>

</GridLayout>`

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

import { NativeScriptCommonModule } from "nativescript-angular/common";

import { HomeRoutingModule } from "./home-routing.module";

import { HomeComponent } from "./home.component";

import { ItemDetailComponent } from "./item-detail/item-detail.component";

@NgModule({

imports: [
    NativeScriptCommonModule,
    HomeRoutingModule
],

declarations: [
    HomeComponent,
    ItemDetailComponent
],

schemas: [
    NO_ERRORS_SCHEMA
]

})

export class HomeModule { }`

`import { NgModule } from "@angular/core";

import { Routes } from "@angular/router";

import { NativeScriptRouterModule } from "nativescript-angular/router";

import { HomeComponent } from "./home.component";

import { ItemDetailComponent } from "./item-detail/item-detail.component";

const routes: Routes = [

{ path: "default", component: HomeComponent },

{ path: "item/:id", component: ItemDetailComponent }

];

@NgModule({

imports: [NativeScriptRouterModule.forChild(routes)],

exports: [NativeScriptRouterModule]

})

export class HomeRoutingModule { }`

`<GridLayout class="page page-content">

<ListView [items]="items" class="list-group">

    <ng-template let-item="item">

        <ScrollView height="150">

            <Label [text]="item.name" class="list-group-item"></Label>

        </ScrollView>

    </ng-template>

</ListView>

</GridLayout>`

`import { Component, OnInit } from "@angular/core";
import { DataService, IDataItem } from "../shared/data.service";

@Component({
selector: "Browse",
moduleId: module.id,
templateUrl: "./browse.component.html"
})
export class BrowseComponent implements OnInit {

items: Array<IDataItem>;

constructor(private _itemService: DataService) { }

ngOnInit(): void {
    this.items = this._itemService.getItems();
}
}

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

import { NativeScriptCommonModule } from "nativescript-angular/common";

import { BrowseRoutingModule } from "./browse-routing.module";

import { BrowseComponent } from "./browse.component";

import { DataService } from "../shared/data.service";

@NgModule({
imports: [
    NativeScriptCommonModule,
    BrowseRoutingModule
],
declarations: [
    BrowseComponent
],
schemas: [
    NO_ERRORS_SCHEMA
],
providers:[
    DataService
]
})
export class BrowseModule { }`

`

app.routing.ts:-

`<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>

</TabView>`

`import { Component, OnInit } from "@angular/core";

 import { isAndroid } from "tns-core-modules/platform";

@Component({
selector: "ns-app",

moduleId: module.id,

templateUrl: "app.component.html"
})
export class AppComponent implements OnInit {

constructor() {
    // Use the component constructor to inject providers.
}

ngOnInit(): void {
    // Init your component properties here.
}

getIconSource(icon: string): string {
    const iconPrefix = isAndroid ? "res://" : "res://tabIcons/";

    return iconPrefix + icon;
}
}

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptModule } from "nativescript-angular/nativescript.module";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
bootstrap: [
    AppComponent
],
imports: [
    NativeScriptModule,
    AppRoutingModule
],
declarations: [
    AppComponent
],
schemas: [
    NO_ERRORS_SCHEMA
]
})
export class AppModule { }

`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)",

    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"
}
];

@NgModule({

imports: [NativeScriptRouterModule.forRoot(routes)],

exports: [NativeScriptRouterModule]
})

export class AppRoutingModule { }

`<GridLayout class="page page-content">

<ListView [items]="items" class="list-group">

    <ng-template let-item="item">

        <ScrollView height="150">

            <Label [text]="item.name" class="list-group-item"></Label>

        </ScrollView>

    </ng-template>

</ListView>

</GridLayout>`

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

import { NativeScriptCommonModule } from "nativescript-angular/common";

import { HomeRoutingModule } from "./home-routing.module";

import { HomeComponent } from "./home.component";

import { ItemDetailComponent } from "./item-detail/item-detail.component";

@NgModule({

imports: [
    NativeScriptCommonModule,
    HomeRoutingModule
],

declarations: [
    HomeComponent,
    ItemDetailComponent
],

schemas: [
    NO_ERRORS_SCHEMA
]

})

export class HomeModule { }`

`import { NgModule } from "@angular/core";

import { Routes } from "@angular/router";

import { NativeScriptRouterModule } from "nativescript-angular/router";

import { HomeComponent } from "./home.component";

import { ItemDetailComponent } from "./item-detail/item-detail.component";

const routes: Routes = [

{ path: "default", component: HomeComponent },

{ path: "item/:id", component: ItemDetailComponent }

];

@NgModule({

imports: [NativeScriptRouterModule.forChild(routes)],

exports: [NativeScriptRouterModule]

})

export class HomeRoutingModule { }`

`<GridLayout class="page page-content">

<ListView [items]="items" class="list-group">

    <ng-template let-item="item">

        <ScrollView height="150">

            <Label [text]="item.name" class="list-group-item"></Label>

        </ScrollView>

    </ng-template>

</ListView>

</GridLayout>`

`import { Component, OnInit } from "@angular/core";
import { DataService, IDataItem } from "../shared/data.service";

@Component({
selector: "Browse",
moduleId: module.id,
templateUrl: "./browse.component.html"
})
export class BrowseComponent implements OnInit {

items: Array<IDataItem>;

constructor(private _itemService: DataService) { }

ngOnInit(): void {
    this.items = this._itemService.getItems();
}
}

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

import { NativeScriptCommonModule } from "nativescript-angular/common";

import { BrowseRoutingModule } from "./browse-routing.module";

import { BrowseComponent } from "./browse.component";

import { DataService } from "../shared/data.service";

@NgModule({
imports: [
    NativeScriptCommonModule,
    BrowseRoutingModule
],
declarations: [
    BrowseComponent
],
schemas: [
    NO_ERRORS_SCHEMA
],
providers:[
    DataService
]
})
export class BrowseModule { }`

`

home.component.html:-

`<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>

</TabView>`

`import { Component, OnInit } from "@angular/core";

 import { isAndroid } from "tns-core-modules/platform";

@Component({
selector: "ns-app",

moduleId: module.id,

templateUrl: "app.component.html"
})
export class AppComponent implements OnInit {

constructor() {
    // Use the component constructor to inject providers.
}

ngOnInit(): void {
    // Init your component properties here.
}

getIconSource(icon: string): string {
    const iconPrefix = isAndroid ? "res://" : "res://tabIcons/";

    return iconPrefix + icon;
}
}

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptModule } from "nativescript-angular/nativescript.module";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
bootstrap: [
    AppComponent
],
imports: [
    NativeScriptModule,
    AppRoutingModule
],
declarations: [
    AppComponent
],
schemas: [
    NO_ERRORS_SCHEMA
]
})
export class AppModule { }

`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)",

    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"
}
];

@NgModule({

imports: [NativeScriptRouterModule.forRoot(routes)],

exports: [NativeScriptRouterModule]
})

export class AppRoutingModule { }

`<GridLayout class="page page-content">

<ListView [items]="items" class="list-group">

    <ng-template let-item="item">

        <ScrollView height="150">

            <Label [text]="item.name" class="list-group-item"></Label>

        </ScrollView>

    </ng-template>

</ListView>

</GridLayout>`

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

import { NativeScriptCommonModule } from "nativescript-angular/common";

import { HomeRoutingModule } from "./home-routing.module";

import { HomeComponent } from "./home.component";

import { ItemDetailComponent } from "./item-detail/item-detail.component";

@NgModule({

imports: [
    NativeScriptCommonModule,
    HomeRoutingModule
],

declarations: [
    HomeComponent,
    ItemDetailComponent
],

schemas: [
    NO_ERRORS_SCHEMA
]

})

export class HomeModule { }`

`import { NgModule } from "@angular/core";

import { Routes } from "@angular/router";

import { NativeScriptRouterModule } from "nativescript-angular/router";

import { HomeComponent } from "./home.component";

import { ItemDetailComponent } from "./item-detail/item-detail.component";

const routes: Routes = [

{ path: "default", component: HomeComponent },

{ path: "item/:id", component: ItemDetailComponent }

];

@NgModule({

imports: [NativeScriptRouterModule.forChild(routes)],

exports: [NativeScriptRouterModule]

})

export class HomeRoutingModule { }`

`<GridLayout class="page page-content">

<ListView [items]="items" class="list-group">

    <ng-template let-item="item">

        <ScrollView height="150">

            <Label [text]="item.name" class="list-group-item"></Label>

        </ScrollView>

    </ng-template>

</ListView>

</GridLayout>`

`import { Component, OnInit } from "@angular/core";
import { DataService, IDataItem } from "../shared/data.service";

@Component({
selector: "Browse",
moduleId: module.id,
templateUrl: "./browse.component.html"
})
export class BrowseComponent implements OnInit {

items: Array<IDataItem>;

constructor(private _itemService: DataService) { }

ngOnInit(): void {
    this.items = this._itemService.getItems();
}
}

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

import { NativeScriptCommonModule } from "nativescript-angular/common";

import { BrowseRoutingModule } from "./browse-routing.module";

import { BrowseComponent } from "./browse.component";

import { DataService } from "../shared/data.service";

@NgModule({
imports: [
    NativeScriptCommonModule,
    BrowseRoutingModule
],
declarations: [
    BrowseComponent
],
schemas: [
    NO_ERRORS_SCHEMA
],
providers:[
    DataService
]
})
export class BrowseModule { }`

主路由.module.ts:-

`<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>

</TabView>`

`import { Component, OnInit } from "@angular/core";

 import { isAndroid } from "tns-core-modules/platform";

@Component({
selector: "ns-app",

moduleId: module.id,

templateUrl: "app.component.html"
})
export class AppComponent implements OnInit {

constructor() {
    // Use the component constructor to inject providers.
}

ngOnInit(): void {
    // Init your component properties here.
}

getIconSource(icon: string): string {
    const iconPrefix = isAndroid ? "res://" : "res://tabIcons/";

    return iconPrefix + icon;
}
}

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptModule } from "nativescript-angular/nativescript.module";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
bootstrap: [
    AppComponent
],
imports: [
    NativeScriptModule,
    AppRoutingModule
],
declarations: [
    AppComponent
],
schemas: [
    NO_ERRORS_SCHEMA
]
})
export class AppModule { }

`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)",

    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"
}
];

@NgModule({

imports: [NativeScriptRouterModule.forRoot(routes)],

exports: [NativeScriptRouterModule]
})

export class AppRoutingModule { }

`<GridLayout class="page page-content">

<ListView [items]="items" class="list-group">

    <ng-template let-item="item">

        <ScrollView height="150">

            <Label [text]="item.name" class="list-group-item"></Label>

        </ScrollView>

    </ng-template>

</ListView>

</GridLayout>`

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

import { NativeScriptCommonModule } from "nativescript-angular/common";

import { HomeRoutingModule } from "./home-routing.module";

import { HomeComponent } from "./home.component";

import { ItemDetailComponent } from "./item-detail/item-detail.component";

@NgModule({

imports: [
    NativeScriptCommonModule,
    HomeRoutingModule
],

declarations: [
    HomeComponent,
    ItemDetailComponent
],

schemas: [
    NO_ERRORS_SCHEMA
]

})

export class HomeModule { }`

`import { NgModule } from "@angular/core";

import { Routes } from "@angular/router";

import { NativeScriptRouterModule } from "nativescript-angular/router";

import { HomeComponent } from "./home.component";

import { ItemDetailComponent } from "./item-detail/item-detail.component";

const routes: Routes = [

{ path: "default", component: HomeComponent },

{ path: "item/:id", component: ItemDetailComponent }

];

@NgModule({

imports: [NativeScriptRouterModule.forChild(routes)],

exports: [NativeScriptRouterModule]

})

export class HomeRoutingModule { }`

`<GridLayout class="page page-content">

<ListView [items]="items" class="list-group">

    <ng-template let-item="item">

        <ScrollView height="150">

            <Label [text]="item.name" class="list-group-item"></Label>

        </ScrollView>

    </ng-template>

</ListView>

</GridLayout>`

`import { Component, OnInit } from "@angular/core";
import { DataService, IDataItem } from "../shared/data.service";

@Component({
selector: "Browse",
moduleId: module.id,
templateUrl: "./browse.component.html"
})
export class BrowseComponent implements OnInit {

items: Array<IDataItem>;

constructor(private _itemService: DataService) { }

ngOnInit(): void {
    this.items = this._itemService.getItems();
}
}

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

import { NativeScriptCommonModule } from "nativescript-angular/common";

import { BrowseRoutingModule } from "./browse-routing.module";

import { BrowseComponent } from "./browse.component";

import { DataService } from "../shared/data.service";

@NgModule({
imports: [
    NativeScriptCommonModule,
    BrowseRoutingModule
],
declarations: [
    BrowseComponent
],
schemas: [
    NO_ERRORS_SCHEMA
],
providers:[
    DataService
]
})
export class BrowseModule { }`

browse.component.html:-

`<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>

</TabView>`

`import { Component, OnInit } from "@angular/core";

 import { isAndroid } from "tns-core-modules/platform";

@Component({
selector: "ns-app",

moduleId: module.id,

templateUrl: "app.component.html"
})
export class AppComponent implements OnInit {

constructor() {
    // Use the component constructor to inject providers.
}

ngOnInit(): void {
    // Init your component properties here.
}

getIconSource(icon: string): string {
    const iconPrefix = isAndroid ? "res://" : "res://tabIcons/";

    return iconPrefix + icon;
}
}

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptModule } from "nativescript-angular/nativescript.module";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
bootstrap: [
    AppComponent
],
imports: [
    NativeScriptModule,
    AppRoutingModule
],
declarations: [
    AppComponent
],
schemas: [
    NO_ERRORS_SCHEMA
]
})
export class AppModule { }

`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)",

    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"
}
];

@NgModule({

imports: [NativeScriptRouterModule.forRoot(routes)],

exports: [NativeScriptRouterModule]
})

export class AppRoutingModule { }

`<GridLayout class="page page-content">

<ListView [items]="items" class="list-group">

    <ng-template let-item="item">

        <ScrollView height="150">

            <Label [text]="item.name" class="list-group-item"></Label>

        </ScrollView>

    </ng-template>

</ListView>

</GridLayout>`

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

import { NativeScriptCommonModule } from "nativescript-angular/common";

import { HomeRoutingModule } from "./home-routing.module";

import { HomeComponent } from "./home.component";

import { ItemDetailComponent } from "./item-detail/item-detail.component";

@NgModule({

imports: [
    NativeScriptCommonModule,
    HomeRoutingModule
],

declarations: [
    HomeComponent,
    ItemDetailComponent
],

schemas: [
    NO_ERRORS_SCHEMA
]

})

export class HomeModule { }`

`import { NgModule } from "@angular/core";

import { Routes } from "@angular/router";

import { NativeScriptRouterModule } from "nativescript-angular/router";

import { HomeComponent } from "./home.component";

import { ItemDetailComponent } from "./item-detail/item-detail.component";

const routes: Routes = [

{ path: "default", component: HomeComponent },

{ path: "item/:id", component: ItemDetailComponent }

];

@NgModule({

imports: [NativeScriptRouterModule.forChild(routes)],

exports: [NativeScriptRouterModule]

})

export class HomeRoutingModule { }`

`<GridLayout class="page page-content">

<ListView [items]="items" class="list-group">

    <ng-template let-item="item">

        <ScrollView height="150">

            <Label [text]="item.name" class="list-group-item"></Label>

        </ScrollView>

    </ng-template>

</ListView>

</GridLayout>`

`import { Component, OnInit } from "@angular/core";
import { DataService, IDataItem } from "../shared/data.service";

@Component({
selector: "Browse",
moduleId: module.id,
templateUrl: "./browse.component.html"
})
export class BrowseComponent implements OnInit {

items: Array<IDataItem>;

constructor(private _itemService: DataService) { }

ngOnInit(): void {
    this.items = this._itemService.getItems();
}
}

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

import { NativeScriptCommonModule } from "nativescript-angular/common";

import { BrowseRoutingModule } from "./browse-routing.module";

import { BrowseComponent } from "./browse.component";

import { DataService } from "../shared/data.service";

@NgModule({
imports: [
    NativeScriptCommonModule,
    BrowseRoutingModule
],
declarations: [
    BrowseComponent
],
schemas: [
    NO_ERRORS_SCHEMA
],
providers:[
    DataService
]
})
export class BrowseModule { }`

浏览路由.module.ts:-

`import { Component, OnInit } from "@angular/core";
import { DataService, IDataItem } from "../shared/data.service";

@Component({
selector: "Home",
moduleId: module.id,
templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {

items: Array<IDataItem>;

constructor(private _itemService: DataService) { }

ngOnInit(): void {
    this.items = this._itemService.getItems();
}
}` 

`import { NgModule } from "@angular/core";

import { Routes } from "@angular/router";

import { NativeScriptRouterModule } from "nativescript-angular/router";

import { BrowseComponent } from "./browse.component";

const routes: Routes = [

{ path: "default", component: BrowseComponent }

];

@NgModule({

imports: [NativeScriptRouterModule.forChild(routes)],

exports: [NativeScriptRouterModule]

})

export class BrowseRoutingModule { }

`

示例如下：
两个listview在tabView中工作，例如：-

app.component.html:-

`<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>

</TabView>`

`import { Component, OnInit } from "@angular/core";

 import { isAndroid } from "tns-core-modules/platform";

@Component({
selector: "ns-app",

moduleId: module.id,

templateUrl: "app.component.html"
})
export class AppComponent implements OnInit {

constructor() {
    // Use the component constructor to inject providers.
}

ngOnInit(): void {
    // Init your component properties here.
}

getIconSource(icon: string): string {
    const iconPrefix = isAndroid ? "res://" : "res://tabIcons/";

    return iconPrefix + icon;
}
}

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptModule } from "nativescript-angular/nativescript.module";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
bootstrap: [
    AppComponent
],
imports: [
    NativeScriptModule,
    AppRoutingModule
],
declarations: [
    AppComponent
],
schemas: [
    NO_ERRORS_SCHEMA
]
})
export class AppModule { }

`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)",

    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"
}
];

@NgModule({

imports: [NativeScriptRouterModule.forRoot(routes)],

exports: [NativeScriptRouterModule]
})

export class AppRoutingModule { }

`<GridLayout class="page page-content">

<ListView [items]="items" class="list-group">

    <ng-template let-item="item">

        <ScrollView height="150">

            <Label [text]="item.name" class="list-group-item"></Label>

        </ScrollView>

    </ng-template>

</ListView>

</GridLayout>`

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

import { NativeScriptCommonModule } from "nativescript-angular/common";

import { HomeRoutingModule } from "./home-routing.module";

import { HomeComponent } from "./home.component";

import { ItemDetailComponent } from "./item-detail/item-detail.component";

@NgModule({

imports: [
    NativeScriptCommonModule,
    HomeRoutingModule
],

declarations: [
    HomeComponent,
    ItemDetailComponent
],

schemas: [
    NO_ERRORS_SCHEMA
]

})

export class HomeModule { }`

`import { NgModule } from "@angular/core";

import { Routes } from "@angular/router";

import { NativeScriptRouterModule } from "nativescript-angular/router";

import { HomeComponent } from "./home.component";

import { ItemDetailComponent } from "./item-detail/item-detail.component";

const routes: Routes = [

{ path: "default", component: HomeComponent },

{ path: "item/:id", component: ItemDetailComponent }

];

@NgModule({

imports: [NativeScriptRouterModule.forChild(routes)],

exports: [NativeScriptRouterModule]

})

export class HomeRoutingModule { }`

`<GridLayout class="page page-content">

<ListView [items]="items" class="list-group">

    <ng-template let-item="item">

        <ScrollView height="150">

            <Label [text]="item.name" class="list-group-item"></Label>

        </ScrollView>

    </ng-template>

</ListView>

</GridLayout>`

`import { Component, OnInit } from "@angular/core";
import { DataService, IDataItem } from "../shared/data.service";

@Component({
selector: "Browse",
moduleId: module.id,
templateUrl: "./browse.component.html"
})
export class BrowseComponent implements OnInit {

items: Array<IDataItem>;

constructor(private _itemService: DataService) { }

ngOnInit(): void {
    this.items = this._itemService.getItems();
}
}

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

import { NativeScriptCommonModule } from "nativescript-angular/common";

import { BrowseRoutingModule } from "./browse-routing.module";

import { BrowseComponent } from "./browse.component";

import { DataService } from "../shared/data.service";

@NgModule({
imports: [
    NativeScriptCommonModule,
    BrowseRoutingModule
],
declarations: [
    BrowseComponent
],
schemas: [
    NO_ERRORS_SCHEMA
],
providers:[
    DataService
]
})
export class BrowseModule { }`

`
app.module.ts:-

`<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>

</TabView>`

`import { Component, OnInit } from "@angular/core";

 import { isAndroid } from "tns-core-modules/platform";

@Component({
selector: "ns-app",

moduleId: module.id,

templateUrl: "app.component.html"
})
export class AppComponent implements OnInit {

constructor() {
    // Use the component constructor to inject providers.
}

ngOnInit(): void {
    // Init your component properties here.
}

getIconSource(icon: string): string {
    const iconPrefix = isAndroid ? "res://" : "res://tabIcons/";

    return iconPrefix + icon;
}
}

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptModule } from "nativescript-angular/nativescript.module";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
bootstrap: [
    AppComponent
],
imports: [
    NativeScriptModule,
    AppRoutingModule
],
declarations: [
    AppComponent
],
schemas: [
    NO_ERRORS_SCHEMA
]
})
export class AppModule { }

`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)",

    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"
}
];

@NgModule({

imports: [NativeScriptRouterModule.forRoot(routes)],

exports: [NativeScriptRouterModule]
})

export class AppRoutingModule { }

`<GridLayout class="page page-content">

<ListView [items]="items" class="list-group">

    <ng-template let-item="item">

        <ScrollView height="150">

            <Label [text]="item.name" class="list-group-item"></Label>

        </ScrollView>

    </ng-template>

</ListView>

</GridLayout>`

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

import { NativeScriptCommonModule } from "nativescript-angular/common";

import { HomeRoutingModule } from "./home-routing.module";

import { HomeComponent } from "./home.component";

import { ItemDetailComponent } from "./item-detail/item-detail.component";

@NgModule({

imports: [
    NativeScriptCommonModule,
    HomeRoutingModule
],

declarations: [
    HomeComponent,
    ItemDetailComponent
],

schemas: [
    NO_ERRORS_SCHEMA
]

})

export class HomeModule { }`

`import { NgModule } from "@angular/core";

import { Routes } from "@angular/router";

import { NativeScriptRouterModule } from "nativescript-angular/router";

import { HomeComponent } from "./home.component";

import { ItemDetailComponent } from "./item-detail/item-detail.component";

const routes: Routes = [

{ path: "default", component: HomeComponent },

{ path: "item/:id", component: ItemDetailComponent }

];

@NgModule({

imports: [NativeScriptRouterModule.forChild(routes)],

exports: [NativeScriptRouterModule]

})

export class HomeRoutingModule { }`

`<GridLayout class="page page-content">

<ListView [items]="items" class="list-group">

    <ng-template let-item="item">

        <ScrollView height="150">

            <Label [text]="item.name" class="list-group-item"></Label>

        </ScrollView>

    </ng-template>

</ListView>

</GridLayout>`

`import { Component, OnInit } from "@angular/core";
import { DataService, IDataItem } from "../shared/data.service";

@Component({
selector: "Browse",
moduleId: module.id,
templateUrl: "./browse.component.html"
})
export class BrowseComponent implements OnInit {

items: Array<IDataItem>;

constructor(private _itemService: DataService) { }

ngOnInit(): void {
    this.items = this._itemService.getItems();
}
}

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

import { NativeScriptCommonModule } from "nativescript-angular/common";

import { BrowseRoutingModule } from "./browse-routing.module";

import { BrowseComponent } from "./browse.component";

import { DataService } from "../shared/data.service";

@NgModule({
imports: [
    NativeScriptCommonModule,
    BrowseRoutingModule
],
declarations: [
    BrowseComponent
],
schemas: [
    NO_ERRORS_SCHEMA
],
providers:[
    DataService
]
})
export class BrowseModule { }`

`

app.routing.ts:-

`<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>

</TabView>`

`import { Component, OnInit } from "@angular/core";

 import { isAndroid } from "tns-core-modules/platform";

@Component({
selector: "ns-app",

moduleId: module.id,

templateUrl: "app.component.html"
})
export class AppComponent implements OnInit {

constructor() {
    // Use the component constructor to inject providers.
}

ngOnInit(): void {
    // Init your component properties here.
}

getIconSource(icon: string): string {
    const iconPrefix = isAndroid ? "res://" : "res://tabIcons/";

    return iconPrefix + icon;
}
}

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptModule } from "nativescript-angular/nativescript.module";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
bootstrap: [
    AppComponent
],
imports: [
    NativeScriptModule,
    AppRoutingModule
],
declarations: [
    AppComponent
],
schemas: [
    NO_ERRORS_SCHEMA
]
})
export class AppModule { }

`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)",

    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"
}
];

@NgModule({

imports: [NativeScriptRouterModule.forRoot(routes)],

exports: [NativeScriptRouterModule]
})

export class AppRoutingModule { }

`<GridLayout class="page page-content">

<ListView [items]="items" class="list-group">

    <ng-template let-item="item">

        <ScrollView height="150">

            <Label [text]="item.name" class="list-group-item"></Label>

        </ScrollView>

    </ng-template>

</ListView>

</GridLayout>`

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

import { NativeScriptCommonModule } from "nativescript-angular/common";

import { HomeRoutingModule } from "./home-routing.module";

import { HomeComponent } from "./home.component";

import { ItemDetailComponent } from "./item-detail/item-detail.component";

@NgModule({

imports: [
    NativeScriptCommonModule,
    HomeRoutingModule
],

declarations: [
    HomeComponent,
    ItemDetailComponent
],

schemas: [
    NO_ERRORS_SCHEMA
]

})

export class HomeModule { }`

`import { NgModule } from "@angular/core";

import { Routes } from "@angular/router";

import { NativeScriptRouterModule } from "nativescript-angular/router";

import { HomeComponent } from "./home.component";

import { ItemDetailComponent } from "./item-detail/item-detail.component";

const routes: Routes = [

{ path: "default", component: HomeComponent },

{ path: "item/:id", component: ItemDetailComponent }

];

@NgModule({

imports: [NativeScriptRouterModule.forChild(routes)],

exports: [NativeScriptRouterModule]

})

export class HomeRoutingModule { }`

`<GridLayout class="page page-content">

<ListView [items]="items" class="list-group">

    <ng-template let-item="item">

        <ScrollView height="150">

            <Label [text]="item.name" class="list-group-item"></Label>

        </ScrollView>

    </ng-template>

</ListView>

</GridLayout>`

`import { Component, OnInit } from "@angular/core";
import { DataService, IDataItem } from "../shared/data.service";

@Component({
selector: "Browse",
moduleId: module.id,
templateUrl: "./browse.component.html"
})
export class BrowseComponent implements OnInit {

items: Array<IDataItem>;

constructor(private _itemService: DataService) { }

ngOnInit(): void {
    this.items = this._itemService.getItems();
}
}

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

import { NativeScriptCommonModule } from "nativescript-angular/common";

import { BrowseRoutingModule } from "./browse-routing.module";

import { BrowseComponent } from "./browse.component";

import { DataService } from "../shared/data.service";

@NgModule({
imports: [
    NativeScriptCommonModule,
    BrowseRoutingModule
],
declarations: [
    BrowseComponent
],
schemas: [
    NO_ERRORS_SCHEMA
],
providers:[
    DataService
]
})
export class BrowseModule { }`

`

home.component.html:-

`<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>

</TabView>`

`import { Component, OnInit } from "@angular/core";

 import { isAndroid } from "tns-core-modules/platform";

@Component({
selector: "ns-app",

moduleId: module.id,

templateUrl: "app.component.html"
})
export class AppComponent implements OnInit {

constructor() {
    // Use the component constructor to inject providers.
}

ngOnInit(): void {
    // Init your component properties here.
}

getIconSource(icon: string): string {
    const iconPrefix = isAndroid ? "res://" : "res://tabIcons/";

    return iconPrefix + icon;
}
}

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptModule } from "nativescript-angular/nativescript.module";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
bootstrap: [
    AppComponent
],
imports: [
    NativeScriptModule,
    AppRoutingModule
],
declarations: [
    AppComponent
],
schemas: [
    NO_ERRORS_SCHEMA
]
})
export class AppModule { }

`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)",

    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"
}
];

@NgModule({

imports: [NativeScriptRouterModule.forRoot(routes)],

exports: [NativeScriptRouterModule]
})

export class AppRoutingModule { }

`<GridLayout class="page page-content">

<ListView [items]="items" class="list-group">

    <ng-template let-item="item">

        <ScrollView height="150">

            <Label [text]="item.name" class="list-group-item"></Label>

        </ScrollView>

    </ng-template>

</ListView>

</GridLayout>`

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

import { NativeScriptCommonModule } from "nativescript-angular/common";

import { HomeRoutingModule } from "./home-routing.module";

import { HomeComponent } from "./home.component";

import { ItemDetailComponent } from "./item-detail/item-detail.component";

@NgModule({

imports: [
    NativeScriptCommonModule,
    HomeRoutingModule
],

declarations: [
    HomeComponent,
    ItemDetailComponent
],

schemas: [
    NO_ERRORS_SCHEMA
]

})

export class HomeModule { }`

`import { NgModule } from "@angular/core";

import { Routes } from "@angular/router";

import { NativeScriptRouterModule } from "nativescript-angular/router";

import { HomeComponent } from "./home.component";

import { ItemDetailComponent } from "./item-detail/item-detail.component";

const routes: Routes = [

{ path: "default", component: HomeComponent },

{ path: "item/:id", component: ItemDetailComponent }

];

@NgModule({

imports: [NativeScriptRouterModule.forChild(routes)],

exports: [NativeScriptRouterModule]

})

export class HomeRoutingModule { }`

`<GridLayout class="page page-content">

<ListView [items]="items" class="list-group">

    <ng-template let-item="item">

        <ScrollView height="150">

            <Label [text]="item.name" class="list-group-item"></Label>

        </ScrollView>

    </ng-template>

</ListView>

</GridLayout>`

`import { Component, OnInit } from "@angular/core";
import { DataService, IDataItem } from "../shared/data.service";

@Component({
selector: "Browse",
moduleId: module.id,
templateUrl: "./browse.component.html"
})
export class BrowseComponent implements OnInit {

items: Array<IDataItem>;

constructor(private _itemService: DataService) { }

ngOnInit(): void {
    this.items = this._itemService.getItems();
}
}

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

import { NativeScriptCommonModule } from "nativescript-angular/common";

import { BrowseRoutingModule } from "./browse-routing.module";

import { BrowseComponent } from "./browse.component";

import { DataService } from "../shared/data.service";

@NgModule({
imports: [
    NativeScriptCommonModule,
    BrowseRoutingModule
],
declarations: [
    BrowseComponent
],
schemas: [
    NO_ERRORS_SCHEMA
],
providers:[
    DataService
]
})
export class BrowseModule { }`

主路由.module.ts:-

`<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>

</TabView>`

`import { Component, OnInit } from "@angular/core";

 import { isAndroid } from "tns-core-modules/platform";

@Component({
selector: "ns-app",

moduleId: module.id,

templateUrl: "app.component.html"
})
export class AppComponent implements OnInit {

constructor() {
    // Use the component constructor to inject providers.
}

ngOnInit(): void {
    // Init your component properties here.
}

getIconSource(icon: string): string {
    const iconPrefix = isAndroid ? "res://" : "res://tabIcons/";

    return iconPrefix + icon;
}
}

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptModule } from "nativescript-angular/nativescript.module";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
bootstrap: [
    AppComponent
],
imports: [
    NativeScriptModule,
    AppRoutingModule
],
declarations: [
    AppComponent
],
schemas: [
    NO_ERRORS_SCHEMA
]
})
export class AppModule { }

`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)",

    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"
}
];

@NgModule({

imports: [NativeScriptRouterModule.forRoot(routes)],

exports: [NativeScriptRouterModule]
})

export class AppRoutingModule { }

`<GridLayout class="page page-content">

<ListView [items]="items" class="list-group">

    <ng-template let-item="item">

        <ScrollView height="150">

            <Label [text]="item.name" class="list-group-item"></Label>

        </ScrollView>

    </ng-template>

</ListView>

</GridLayout>`

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

import { NativeScriptCommonModule } from "nativescript-angular/common";

import { HomeRoutingModule } from "./home-routing.module";

import { HomeComponent } from "./home.component";

import { ItemDetailComponent } from "./item-detail/item-detail.component";

@NgModule({

imports: [
    NativeScriptCommonModule,
    HomeRoutingModule
],

declarations: [
    HomeComponent,
    ItemDetailComponent
],

schemas: [
    NO_ERRORS_SCHEMA
]

})

export class HomeModule { }`

`import { NgModule } from "@angular/core";

import { Routes } from "@angular/router";

import { NativeScriptRouterModule } from "nativescript-angular/router";

import { HomeComponent } from "./home.component";

import { ItemDetailComponent } from "./item-detail/item-detail.component";

const routes: Routes = [

{ path: "default", component: HomeComponent },

{ path: "item/:id", component: ItemDetailComponent }

];

@NgModule({

imports: [NativeScriptRouterModule.forChild(routes)],

exports: [NativeScriptRouterModule]

})

export class HomeRoutingModule { }`

`<GridLayout class="page page-content">

<ListView [items]="items" class="list-group">

    <ng-template let-item="item">

        <ScrollView height="150">

            <Label [text]="item.name" class="list-group-item"></Label>

        </ScrollView>

    </ng-template>

</ListView>

</GridLayout>`

`import { Component, OnInit } from "@angular/core";
import { DataService, IDataItem } from "../shared/data.service";

@Component({
selector: "Browse",
moduleId: module.id,
templateUrl: "./browse.component.html"
})
export class BrowseComponent implements OnInit {

items: Array<IDataItem>;

constructor(private _itemService: DataService) { }

ngOnInit(): void {
    this.items = this._itemService.getItems();
}
}

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

import { NativeScriptCommonModule } from "nativescript-angular/common";

import { BrowseRoutingModule } from "./browse-routing.module";

import { BrowseComponent } from "./browse.component";

import { DataService } from "../shared/data.service";

@NgModule({
imports: [
    NativeScriptCommonModule,
    BrowseRoutingModule
],
declarations: [
    BrowseComponent
],
schemas: [
    NO_ERRORS_SCHEMA
],
providers:[
    DataService
]
})
export class BrowseModule { }`

browse.component.html:-

`<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>

</TabView>`

`import { Component, OnInit } from "@angular/core";

 import { isAndroid } from "tns-core-modules/platform";

@Component({
selector: "ns-app",

moduleId: module.id,

templateUrl: "app.component.html"
})
export class AppComponent implements OnInit {

constructor() {
    // Use the component constructor to inject providers.
}

ngOnInit(): void {
    // Init your component properties here.
}

getIconSource(icon: string): string {
    const iconPrefix = isAndroid ? "res://" : "res://tabIcons/";

    return iconPrefix + icon;
}
}

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptModule } from "nativescript-angular/nativescript.module";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
bootstrap: [
    AppComponent
],
imports: [
    NativeScriptModule,
    AppRoutingModule
],
declarations: [
    AppComponent
],
schemas: [
    NO_ERRORS_SCHEMA
]
})
export class AppModule { }

`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)",

    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"
}
];

@NgModule({

imports: [NativeScriptRouterModule.forRoot(routes)],

exports: [NativeScriptRouterModule]
})

export class AppRoutingModule { }

`<GridLayout class="page page-content">

<ListView [items]="items" class="list-group">

    <ng-template let-item="item">

        <ScrollView height="150">

            <Label [text]="item.name" class="list-group-item"></Label>

        </ScrollView>

    </ng-template>

</ListView>

</GridLayout>`

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

import { NativeScriptCommonModule } from "nativescript-angular/common";

import { HomeRoutingModule } from "./home-routing.module";

import { HomeComponent } from "./home.component";

import { ItemDetailComponent } from "./item-detail/item-detail.component";

@NgModule({

imports: [
    NativeScriptCommonModule,
    HomeRoutingModule
],

declarations: [
    HomeComponent,
    ItemDetailComponent
],

schemas: [
    NO_ERRORS_SCHEMA
]

})

export class HomeModule { }`

`import { NgModule } from "@angular/core";

import { Routes } from "@angular/router";

import { NativeScriptRouterModule } from "nativescript-angular/router";

import { HomeComponent } from "./home.component";

import { ItemDetailComponent } from "./item-detail/item-detail.component";

const routes: Routes = [

{ path: "default", component: HomeComponent },

{ path: "item/:id", component: ItemDetailComponent }

];

@NgModule({

imports: [NativeScriptRouterModule.forChild(routes)],

exports: [NativeScriptRouterModule]

})

export class HomeRoutingModule { }`

`<GridLayout class="page page-content">

<ListView [items]="items" class="list-group">

    <ng-template let-item="item">

        <ScrollView height="150">

            <Label [text]="item.name" class="list-group-item"></Label>

        </ScrollView>

    </ng-template>

</ListView>

</GridLayout>`

`import { Component, OnInit } from "@angular/core";
import { DataService, IDataItem } from "../shared/data.service";

@Component({
selector: "Browse",
moduleId: module.id,
templateUrl: "./browse.component.html"
})
export class BrowseComponent implements OnInit {

items: Array<IDataItem>;

constructor(private _itemService: DataService) { }

ngOnInit(): void {
    this.items = this._itemService.getItems();
}
}

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

import { NativeScriptCommonModule } from "nativescript-angular/common";

import { BrowseRoutingModule } from "./browse-routing.module";

import { BrowseComponent } from "./browse.component";

import { DataService } from "../shared/data.service";

@NgModule({
imports: [
    NativeScriptCommonModule,
    BrowseRoutingModule
],
declarations: [
    BrowseComponent
],
schemas: [
    NO_ERRORS_SCHEMA
],
providers:[
    DataService
]
})
export class BrowseModule { }`

浏览路由.module.ts:-

`import { Component, OnInit } from "@angular/core";
import { DataService, IDataItem } from "../shared/data.service";

@Component({
selector: "Home",
moduleId: module.id,
templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {

items: Array<IDataItem>;

constructor(private _itemService: DataService) { }

ngOnInit(): void {
    this.items = this._itemService.getItems();
}
}` 

`import { NgModule } from "@angular/core";

import { Routes } from "@angular/router";

import { NativeScriptRouterModule } from "nativescript-angular/router";

import { BrowseComponent } from "./browse.component";

const routes: Routes = [

{ path: "default", component: BrowseComponent }

];

@NgModule({

imports: [NativeScriptRouterModule.forChild(routes)],

exports: [NativeScriptRouterModule]

})

export class BrowseRoutingModule { }

`

示例如下：
该游乐场示例在ios上没有显示任何内容。我还没有在安卓系统上测试过。这个游乐场的例子在ios上没有显示任何东西。我没有在android上测试。你解决了问题吗？@Narendra否，我停止使用Nativescript，因为调试对我来说是一场噩梦。你解决了问题吗？@Narendra否，我停止使用Nativescript，因为调试对我来说是一场噩梦。