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>

回答1:

Your can use Event liberary 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);
        });
      }
    }

来源：https://stackoverflow.com/questions/57360264/how-to-change-variable-from-another-page-ionic4

标签

javascript

angular

typescript

ionic-framework

ionic4