Ionic 3 weatherapp从不同选项卡访问变量

Question

我最近对编写应用程序感兴趣。我想创建一个天气应用。该应用程序应使用API​​（openweathermap.org）显示当前天气。我的应用程序中有3个标签：

• 第一个标签（首页）应显示数据。
• 第二个选项卡提供有关创建者的信息（积分，无用）
• 第三个标签与逻辑有关。

这里是困难：我的第三个标签中有一个Ionic-“ Select”-元素。在那里，您可以选择4个位置之一（已确定）。根据选择的位置，该位置的温度显示在第一个选项卡上。这是一个例子：

有4个位置（“ Zwettl”，“ Krems”，“ St。Pölten”和“ Wien”）。如果我选择Zwettl，则城市“ Zwettl”的当前温度应显示在第一个标签上。

• First Tab, where the temperature should be shown
• Third Tab, 'ion-select' for selecting a location
• Selectable Locations

这是我想知道的：如何通过选择'ion-option'来定义位置的值，以及如何在第一个选项卡（或tab1.page.ts）中访问此变量。] >

您可以忽略图片2中的复选框，因为我试图定义what

以显示在第一个选项卡（温度，湿度，...）之后从tab1到tab3的访问有效。我希望你知道我的意思！

这是我已经拥有的代码：

Tab1.html：

<ion-content [fullscreen]="true">
  <ion-item>    
    <ion-label>
      <p id="weatherdata"></p>
      <h3>{{weather?.main.temp}}°C</h3>
      <ion-button (click)="setLocation1()">Zwettl</ion-button>
      <ion-button (click)="setLocation2()">Wien</ion-button>
    </ion-label>
  </ion-item>
</ion-content>
Tab1.ts：

import { Component } from '@angular/core';
import { ApiService } from './../api.service'
import { HttpParams } from '@angular/common/http';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss'],
})

export class Tab1Page {
  currentDate;
  weather: any;

  constructor(public api: ApiService) {
    this.currentDate = new Date();
  }

  ngOnInit(){
    this.api.loc = "Zwettl";
    this.getWeather();
  }

  setLocation1(){
    this.api.loc = "Zwettl";
    console.log(this.api.loc);
    this.getWeather();
  }

  setLocation2(){
    this.api.loc = "Wien";
    console.log(this.api.loc);
    this.getWeather();

  }

  async getWeather(){
    await this.api.getWeatherData().subscribe(res => {
      console.log(res);
      this.weather = res;

    }, err => {console.log(err);
    });
  }  
}
Tab3.html：

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Settings  
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-list>
    <ion-item>
      <ion-icon name="compass"></ion-icon>
      <ion-label style="padding-left:15px">Location</ion-label>
      <ion-select placeholder="Select One">
        <ion-select-option value="zwettl">Zwettl</ion-select-option>
        <ion-select-option value="krems">Krems</ion-select-option>
        <ion-select-option value="stpoelten">St. Pölten</ion-select-option>
        <ion-select-option value="wien">Wien</ion-select-option>
      </ion-select>
    </ion-item>
  </ion-list>
</ion-content>
API.ts：

import { Injectable } from '@angular/core';
import {Observable, of, throwError} from 'rxjs';
import {HttpClient, HttpHeaders, HttpParams, HttpErrorResponse} from '@angular/common/http';
import{catchError, tap, map} from 'rxjs/operators';

const httpOptions = {
  headers: new HttpHeaders({'Content-Type' : 'application/json'})
};
@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(private http:HttpClient) { }

  loc:any;


  getWeatherData(): Observable<any>{
    const httpOptions = {
      headers: new HttpHeaders({'Content-Type' : 'application/json'})
    };
    const request = this.http.request<any>('GET', "http://api.openweathermap.org/data/2.5/weather?q="+this.loc+"&APPID=99b52e0a2655a753716cf6adb17476a7&units=metric")

            request.subscribe(response => {
                /Handling the response body/
            }, error => {
                console.log(error);
            });
            return request.pipe()

  }
}

并且在Tab3.ts中没有什么重要的东西：（

我最近对编写应用程序感兴趣。我想创建一个天气应用。该应用程序应使用API​​（openweathermap.org）显示当前天气。我的应用程序中有3个标签：第一个标签（...

Answer 1

使用rxjs主题在应用程序中的任何位置定义可观察的值