Question

我正在使用带有两个TabItem的Nativescript（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

您可以使用服务和主题。

在所有ts文件中导入服务文件（使用您喜欢的名称和位置）：
```
import { NavService } from "./services/nav.service";
```

请务必在app.module.ts中导入它，以便通常加载它：

import { NavService } from "./services/nav.service";

@NgModule({
    declarations: [
        AppComponent,
    ],
    bootstrap: [AppComponent],
    imports: [
    ],
    providers: [
        NavService
    ]
})
export class AppModule {}

使用以下内容在指定位置创建服务文件：

import { Injectable } from "@angular/core";
import { Subject } from "rxjs";


@Injectable()
export class NavService {

    private currentState = new Subject<any>();

    constructor () {
    }

    setCurrentState(navPoint: number){
        this.currentState.next(navPoint);
    }


    getCurrentState() {
        return this.currentState.asObservable();
    }
}

将tab2.tab.ts更改为以下内容：

import { Component, OnInit } from "@angular/core";
import { NavService } from "./services/nav.service";

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

        public constructor(private _navService: NavService) {}

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

            this._navService.getCurrentState().subscribe(
                    (state) => {
                    if (state == {{something}}) {
                        //write your code here which should be executed when state has the property {{something}}
                        this.getSomeDataViaHttp();
                    }
                    }
            );
        }

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

}

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

import {Component} from "@angular/core";
import { NavService } from "./services/nav.service";

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

export class HomePage {

    public activeTab: string;

    public constructor(private _navService: NavService) {

    }

    public tabIndexChanged(e: any) {
        this._navService.setCurrentState(e.newIndex);

    }

}

注意＆＃34; typeof＆＃34;设置和获取状态是正确的。

选择tabitem时出现Fire Nativescript tabitem事件

1 个答案: