javascript - 如何从另一个页面更改变量 Ionic4

Question

我正在 Ionic4 中创建一个简单的基于选项卡的应用程序，我想在主选项卡页面中更改一个变量，其中从第一个选项卡显示选项卡切换器，并且我想更改此变量，当滚动位置位于第一个选项卡 ionic 内容的右侧。问题是，如何从 tab1.page.ts 更改 tabs.page.ts 中的变量。我在选项卡页面的 html 中有有关当天的信息，它应该根据滚动位置而变化。

tabs.page.ts 文件(我想更改 current_day，因为它在我的 html 文件中)

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

    }
  }

在tab1.page.ts代码中

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>

Answer 1

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

检查我的更新答案: Update Variable on other page via Observable

Old Answer:

您可以使用 ionic 中的Event 库进行实时变量更新:

在你的 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'});
      }
    }

在你的 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);
        });
      }
    }