Brand Nativescript Tabitem-Ereignis, wenn Tabitem ausgewählt wird

Question

Ich verwende ein Nativescript (Angular 2) TabView mit zwei TabItems. Das XML ist in drei Dateien unterteilt. Eine, die das TabView und zwei andere für jedes TabItem enthält. Daher habe ich auch drei TypeScript-Komponenten.

Momentan lade ich Daten in der OnInit-Methode des zweiten TabItems. Das Problem ist, dass diese Aktion bereits passiert, wenn das erste TabItem der TabView angezeigt/geladen wird. Was ist die beste Vorgehensweise, um diese Daten nur zu laden, wenn das zweite TabItem ausgewählt ist?

Dies ist mein (verkürzt) Code:

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 
    } 

} 

Gibt es ein Schräg 2/Nativescript anderes Ereignis als onInit, die hier helfen würde? Oder sollte ich die Methode tabIndexChanged in der home.page.ts dafür verwenden? Oder setzen Sie die gesamte Logik und das XML für das TabView zurück in eine XML-Datei und eine ts-Datei? Was ist die beste Vorgehensweise?

Answer 1

Sie könnten einen Dienst und einen Betreff wie folgt verwenden.

1. Import der Service-Datei in alle Dateien ts (verwenden Sie den Namen und den Ort Ihrer Wahl):

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

2. Stellen Sie sicher, es im Allgemeinen auch in Ihrem app.module.ts zu importieren um es zu laden :

   import { NavService } from "./services/nav.service"; 
   
   @NgModule({ 
       declarations: [ 
        AppComponent, 
       ], 
       bootstrap: [AppComponent], 
       imports: [ 
       ], 
       providers: [ 
        NavService 
       ] 
   }) 
   export class AppModule {} 
   

3. die Servicedatei in der angegebenen Position mit folgendem Inhalt erstellen:

   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(); 
       } 
   } 
   

4. ändern die tab2.tab.ts auf die folgenden:

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

5. Rufen Sie die setCurrentState des Dienstes in Ihrer home.page.ts:

   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); 
   
       } 
   
   } 
   

6. Achten Sie darauf, dass die Einstellung "typeof" und das Erhalten des Status ist korrekt.