Access objects from tabs page

Ionic Framework ionic-v3
1

Hi Guys ,
can any one tell me how i will get data from tabs pages .
For more details lets i clarify my query,
i have one tab data page which contain 4 tabs pages but as i given one submit button on tabdata page to send data to api
call. how can i access data from child pages .
i tried with view child page but it not working.

Thanks …!

2

maybe try using providers?

1 Like
3

@FnnHuman , yes i aware of services (providers), but its not giving result as i wants.
from tabs page 1 , i assigned value for variable but while accessing from tab contain page it showing null.

4

could you show me some code?

5

Tab data page

import { ChatService } from '../../providers/chat-service/chat-service';//import of chat service
@Component({
  templateUrl: 'build/pages/aircraft-tab-data/aircraft-tab-data.html',
  providers:[ChatService]//provider define 
})

export class AircraftTabDataPage {

 @ViewChild("aircrafttab") tabRef: Tabs;
//tabs define
  info = AircraftDetailsPage;
  Weight = AircraftWeightPage;
  equipment = AircraftEquipmentsPage;
  surveillance = AircraftSurveillancePage;
  performance = AircraftPerformancePage;
  attachment = AircraftAttachmentsPage;
//tabs define
  //  // selectedTabIndex: number = 1;
  tabsColor: string = "default";
  tabsMode: string = "md";
  tabsPlacement: string = "top";
//added instance of chat service to constructor 
  constructor(private navCtrl: NavController,private chatservice:ChatService) {
  
  }
  registerAircraft(){
    console.log("roshdfn");
    console.log(this.chatservice.aircraftdetails);//accesing variable from service file
  }

child page where i modify aircraftdetails variable

import { Component } from '@angular/core';
import { NavController, ModalController, Events } from 'ionic-angular';
import { DataService } from '../../providers/data-service/data-service';
import { CustomSpinnerPage } from '../custom-spinner/custom-spinner';
import { SuggestStationPage } from "../suggest-station/suggest-station";
import { ChatService } from '../../providers/chat-service/chat-service';

/*
  Generated class for the AircraftDetailsPage page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  templateUrl: 'build/pages/aircraft-details/aircraft-details.html',
  providers: [DataService,ChatService],
  directives: [CustomSpinnerPage]
})
export class AircraftDetailsPage {
  private AircraftInformation: any;
  private spinner: any;
  public aircraftype: any;
  public engineName: any;
  public EngineType: any;
  public FuelType: any;
  constructor(private navCtrl: NavController, private dataService: DataService, private modalCtrl: ModalController, private events: Events,private chatservice:ChatService) {

  }
  ngAfterViewInit() {


  }
  showAircraftModel() {
    let modal = this.modalCtrl.create(SuggestStationPage, { backpage: this, type: "airCraft" });
    modal.present();

  }
  getAircraftDetails() {
    console.log(this.aircraftype);
    console.log("1231");
    this.chatservice.aircraftdetails = this.aircraftype;//modifying variable
     console.log(this.chatservice.aircraftdetails);
    this.spinner = true;
    this.events.publish('AircrafType', this.aircraftype);
    this.events.publish('EngineName', this.engineName);
    if (this.engineName != '' && this.aircraftype != '') {
      this.dataService.getAircraftDetails(this.aircraftype, this.engineName).then(aircraftData => {
        this.spinner = false;
        this.AircraftInformation = aircraftData;


        console.log(this.AircraftInformation);
        console.log("this.AircraftInformation");
        console.log(this.AircraftInformation['AircraftType']);
        this.EngineType = this.AircraftInformation['EngineSpecification']['EngineType'];
        this.FuelType = this.AircraftInformation['AircraftType']['FuelType'];
      });
    }
  }
}

service function

@Injectable()
export class ChatService {
  private _db: any;
  private _todosRef: any;
  private _todos$: any;
  public aircraftdetails="";//variable define to access in page
  constructor(private http: Http) {
    this._db = firebase.database().ref('/'); // Get a firebase reference to the root
    this._todosRef = firebase.database().ref('todos'); // Get a firebase reference to the todos
    

    this._todosRef.on('value',this.handleData,this)
     
  

    this._todos$ = new ReplaySubject();
    //this._todosRef.on('child_changed', this.test, this)
    

  }

@FnnHuman ,if you have any doubt on code please feel free to make query

6

declare variables you want to share in some provider and then use it directly from both pages

1 Like
7

@FnnHuman, yes i understood, as you see my provider have one variable
public aircraftdetails="";//variable define to access in page
and modifying it from tab page 1 in getAircraftDetails method
and finally i am accessing it in main tab data page in registerAircraft() method .
as i know registerAircraft metod should return the modified value of aircraftdetails , but its giving null string , means the modified value not stored on aircraftdetails variable.

8

maybe it is because you use an asynchronous call in your child page?

9

sorry, not getting data. still waiting for result .

10

Eliminate all providers from components. They are causing you to get per-component instances. You also probably don’t want per-component directives, and please give things proper types instead of abusing any.

11

thanks guys for your help , now its working fine.
still any thing like view child things its good to use instead of getting from providers.