如何从另一个页面Ionic4更改变量 [英] How to change variable from another page Ionic4

问题描述

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

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文件 (我想更改current_day，因为它在我的html文件中)

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

    }
  }

在tab1.page.ts代码中

in tab1.page.ts code

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

tabs.page.html

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>

推荐答案

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

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

在您的tab1.page.ts

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

在您的tabs.page.ts

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

这篇关于如何从另一个页面Ionic4更改变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！