Ionic 3 天气应用程序从不同的选项卡访问变量

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

这是我想知道的：如何通过选择“离子选项”来定义位置的值，以及如何在第一个选项卡（或 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 中没有什么重要的 :(

Answer 1

使用 rxjs 主题在应用程序的任何地方定义可观察值

定义一个服务来设置和获取可观察值

全球-foo.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class GlobalFooService {

  constructor() { }

  private fooSubject = new Subject<any>();

  publishSomeData(data: any) {
    this.fooSubject.next(data);
  }

  getObservable(): Subject<any> {
    return this.fooSubject;
  }
}

Tab3.ts

this.globalFooService.publishSomeData({
      foo: 'bar'
    });

Tab1.ts

this.globalFooService.getObservable().subscribe((res) => {
    console.log(res);
}