Событие с таргетингом Fire Nativescript при выборе tabitem

Question

Я использую TabView (Angular 2) TabView с двумя TabItems. XML разделен на три файла. Один, который содержит TabView и два других для каждого TabItem. Поэтому у меня также есть три компонента TypeScript.

В настоящее время я загружаю данные во второй метод onInit TabItem. Проблема в том, что это действие уже происходит, когда отображается первый TabItem TabView. Какова наилучшая практика для загрузки этих данных только при выборе второго 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 
    } 

} 

Есть ли Угловое 2/Nativescript событие, кроме OnInit, что помогло бы здесь? Или мне следует использовать метод tabIndexChanged в home.page.ts для этого? Или поместите всю логику и XML для TabView обратно в один файл xml и один ts-файл? Что такое лучшая практика?

Answer 1

Вы можете использовать сервис и тему, как указано ниже.

1. Импорт файла сервис во всех т.с. файлов (используйте имя и местоположение вам нравится):

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

2. Убедитесь, чтобы импортировать его также в ваших app.module.ts, чтобы загрузить его в целом :

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

3. Создайте файл службы в указанном месте со следующим содержанием:

   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. изменить 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 
        } 
   
   } 
   

5. Вызвать setCurrentState службы в вашем 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. Позаботьтесь о том, настройка «typeof» и получение состояния верны.