选择tabitem时触发Nativescript tabitem事件

Question

我使用的是带有两个TabItems的原生脚本(Angular 2) TabView。XML分为三个文件。一个用于保存TabView，另外两个用于每个TabItem。因此，我还有三个TypeScript组件。

目前，我正在第二个TabItem的onInit方法中加载数据。问题是，在显示/加载TabView的第一个TabItem时，此操作已经发生。仅当选择第二个TabItem时才加载此数据的最佳实践是什么？

这是我的(缩写)代码：

home.page.html：

<ActionBar title="Home"></ActionBar>
<TabView #tabview (selectedIndexChanged)="tabIndexChanged($event)" toggleNavButton>

    <StackLayout *tabItem="{title: 'Tab 1'}">
        <tab1></tab1>
    </StackLayout>

    <StackLayout *tabItem="{title: 'Tab 2'}">
        <tab2></tab2>
    </StackLayout>

</TabView>

home.page.ts：

import {Component} from "@angular/core";

@Component({
    selector: "home-page",
    templateUrl: "./pages/home/home.page.html",
    providers: []
})

export class HomePage {

    public activeTab: string;

    public constructor() {

    }

    public tabIndexChanged(e: any) {

        switch (e.newIndex) {
            case 0:
                console.log(`Selected tab index: ${e.newIndex}`);
                break;
            case 1:
                console.log(`Selected tab index: ${e.newIndex}`);
                break;
            default:
                break;
        }
    }

}

tab1.tab.html：

<StackLayout orientation="vertical" class="p-20">
    <Label text="Tab 1"></Label>
</StackLayout>

tab1.tab.ts：

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

@Component({
    selector: "tab1",
    templateUrl: "./pages/partials/tab1.tab.html",
    providers: []
})
export class Tab1 implements OnInit {

    public constructor() {}

    public ngOnInit() {
        console.log("init Tab 1");
    }

}

tab2.tab.html：

<StackLayout orientation="vertical" class="p-20">
    <Label text="Tab 2"></Label>
</StackLayout>

tab2.tab.ts：

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

@Component({
    selector: "tab2",
    templateUrl: "./pages/partials/tab2.tab.html",
    providers: []
})
export class Tab2 implements OnInit {

    public constructor() {}

    public ngOnInit() {
        console.log("init Tab 2");

        this.getSomeDataViaHttp();
    }

    private getSomeDataViaHttp() {
        //getting data from an API 
    }

}

除了onInit之外，是否还有一个Angular 2/ Nativescript事件会对此有所帮助？或者我应该在home.page.ts中使用tabIndexChanged方法来实现这一点？或者将TabView的所有逻辑和XML放回一个xml文件和一个ts文件中？什么是最佳实践？

Answer 1

您可以使用服务和主题，如下所示。

1. 导入所有ts文件中的服务文件(使用您喜欢的名称和位置)：

从"./services/nav.service";

• Make导入{ NavService }请确保也将其导入到您的app.module.ts中，以便通常加载它：

从“./ NavService /nav.service”导入{ NavService }；@NgModule({声明: AppComponent，，bootstrap: AppComponent，imports：，providers: NavService })导出类AppModule {}

• 在指定位置创建包含以下内容的服务文件：

从“@angular/core”导入{ Injectable }；从“rxjs”导入{ Subject }；@Injectable()导出类NavService { private currentState = new Subject ()；constructor (){} setCurrentState(navPoint: number){ this.currentState.next(navPoint)；} getCurrentState() { return this.currentState.asObservable()；}}

• 将tab2.tab.ts更改为：

从“@angular/ OnInit”导入{ Component，OnInit }；从“./ NavService /nav.service”导入{NavService}；@Component({ selector：" Tab2 "，templateUrl："./pages/partials/tab2.tab.html"，providers：[] })导出类Tab2实现OnInit{公共构造函数(私有_navService: NavService) {}公共ngOnInit() { console.log("init Tab 2")；this._navService.getCurrentState().subscribe( ( state ) => { if (state == {{something}}) ){//在此编写代码，当状态具有属性{{something}} this.getSomeDataViaHttp()时，应执行该代码；}} )；}私有getSomeDataViaHttp() {//从接口获取数据}}

• 调用您home.page.ts中服务的setCurrentState：

从“@angular/core”导入{Component}；从“./templateUrl/nav.service”导入{ NavService }；@Component({ selector：“主页”，templateUrl："./pages/home/home.page.html"，提供者：[] })导出类HomePage {公共activeTab: string；公共构造函数(私有_navService: NavService) {}公共tabIndexChanged(e: any) { this._navService.setCurrentState(e.newIndex)；}}

• 注意"typeof“设置和获取状态是否正确。