CODEWITHSUNDEEP
javascriptangulartypescriptionic-frameworkionic4
Хорошкольные Будни
Хорошкольные Будни

Reputation: 3

How to change variable from another page Ionic4

I'm creating a simple tabs-based app in Ionic4, and I want to change a variable in the main tabs page, where tabs switcher is shown, from the first tab, and I want to change this variable, when the scrolling position is on the right level on the first tab ionic content. The question is, how to change variable in tabs.page.ts from tab1.page.ts. I have info about the current day in html of tabs page, and it should change according to scroll position.

tabs.page.ts file (I want to change current_day, because it's in my html file)


import { Component ,OnInit} from '@angular/core';
import {formatDate} from '@angular/common';
import { Storage } from '@ionic/storage';
import { DatabaseService }  from '../database.service'
import {NavController} from "@ionic/angular"
@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})
export class TabsPage {
  constructor() {
  }
  last_text:String = "";
  cur_text:String = "";
  som = 0
  beginning = 1564617600 * 1000 
  date:any = new Date()
  current_day:String = String(Math.floor((new Date(this.date.getTime() - this.beginning).getTime()+3 * 60*60*1000) / 1000 / 60 / 60 / 24)+1)
  lasts = new Date(this.date.getTime() - this.beginning)
  timerow:String = this.lasts.getHours()+":"+this.lasts.getMinutes()
  sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
  }
  tonorm(str:String){
    let dobav;
    if (str.length == 1){
        dobav = "0"
    }
    else{
        dobav = ""
    }
    return dobav+str
  }
  iter(){
    this.date = new Date()
    this.current_day = String(Math.floor((new Date(this.date.getTime() - this.beginning).getTime()+3 * 60*60*1000) / 1000 / 60 / 60 / 24)+1)
    this.lasts = new Date(this.date.getTime() - this.beginning)
    this.timerow = this.tonorm(String(23-this.lasts.getHours()))+":"+this.tonorm(String(60 - this.lasts.getMinutes()))
  }
  updater(){
    this.iter()
    this.sleep(1000);

    }
  }

in tab1.page.ts code

onPageScroll(event) {
        this.scrlpos = event.detail.scrollTop
        if (this.scrlpos >= 500){
            //change that variable
        }
    }

tabs.page.html

<ion-tabs>
  <ion-list-header no-border slot="top">
    <ion-label position="stacked" class="my-label">День {{current_day}}</ion-label>
    <ion-label position="stacked" class="my-label">{{timerow}}</ion-label>
  </ion-list-header>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="book"></ion-icon>
      <ion-label>текст</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="star"></ion-icon>
      <ion-label>избранное</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="settings"></ion-icon>
      <ion-label>настройки</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
  {{updater()}}
</ion-tabs>

Upvotes: 0

Views: 1909

Answers (2)

Najam Us Saqib
Najam Us Saqib

Reputation: 3402

NOTE: Events Library is now deprecated and not working in ionic 4+. You should switch to Observables.

Check my Update Answer: Update Variable on other page via Observable

Old Answer:

Your can use Event library in ionic for real time Variable Updates:

in your tab1.page.ts

import { Events } from '@ionic/angular';

    export class Tab1 implements OnInit {
      constructor(public events: Events) { }
      
      publishEvent(){
        console.log('shouldPublishEvent');
        this.events.publish('testevent', {key: 'value'});
      }
    }

In your tabs.page.ts

import { Events } from '@ionic/angular';
    export class TabPage implements OnInit {
      constructor(public events: Events) { }
      ngOnInit(){
        this.events.subscribe('testevent', (data) => {
          console.log('testevent');
          console.log(data);
        });
      }
    }

Upvotes: 2

vr_driver
vr_driver

Reputation: 2085

I'll probably get slammed for this, but another different way you can do it is to have a "globals.ts" file that just handles variables that need to be accessed from multiple pages.

Just import that globals file on each page that needs those variables. 

import { GlobalsProvider } from '../providers/globals/globals'; 

constructor(public platform: Platform,
      public globalvals: GlobalsProvider)

Then you can call them on each page...

this.globalvals.setting = true;

Upvotes: 0

Related Questions