Angualr - 获取天气信息并使用pipe渲染到页面上

1. we need a service get the weather

import {Injectable} from '@angular/core';
import {HttpClient, HttpResponse} from '@angular/common/http';
import {Observable, of} from 'rxjs';
import {LocalStorageService} from 'angular-web-storage';

/**
 *  data from tianqiapi
 */
@Injectable({
  providedIn: 'root'
})
export class WeatherService {
  private url = 'https://www.tianqiapi.com/api/?version=v6';

  constructor(private httpClient: HttpClient,
              public localStorageService: LocalStorageService) {
  }


  getWeather(): Observable<Weather> {
    let weather: Weather;
    weather = this.localStorageService.get(Weather.identifier);
    if (weather !== undefined && weather !== null) {
      return of(weather);
    }
    return new Observable<Weather>(subscriber => {
      this.loadWeather().subscribe(res => {
        if (res.ok) {
          subscriber.next(res.body);
          this.localStorageService.set(Weather.identifier, res.body);
          subscriber.complete();
        }
      }, error => {
        subscriber.error(error);
        subscriber.complete();
      });
    });
  }


  private loadWeather(): Observable<HttpResponse<Weather>> {
    return this.httpClient.get<Weather>(this.url, {
      observe: 'response'
    });
  }

}

export class Weather {
  static identifier = 'weather$';
  'cityid': string;
  'date': string;
  'week': string;
  'update_time': string;
  'city': string;
  'cityEn': string;
  'country': string;
  'countryEn': string;
  'wea': string;
  'wea_img': string;
  'tem': string;
  'win': string;
  'win_speed': string;
  'win_meter': string;
  'humidity': string;
  'visibility': string;
  'pressure': string;
  'air': string;
  'air_pm25': number;
  'air_level': string;
  'air_tips': string;
  'alarm': {
    'alarm_type': string;
    'alarm_level': string;
    'alarm_content': string;
  };
}

2.  and a pipe to transform data to Html Element

/**
 * ng2 pipe to transform  weather to ex:
 * <b><sup>雨</sup><span>广州</span><br><span>27ºC</span></b>
 */
@Pipe({name: 'weather'})
export class WeatherPipe implements PipeTransform {
  /**
   *
   * @param weather see Weather
   * @param e   a element reference , or null to create new  element contains data
   * @param type    replace/appendChild/createElement at where invoke this method
   */
  transform(weather: Weather, e?: Element, type?: Tpye): Element {
    const div: HTMLElement = document.createElement('div');
    const b: HTMLElement = document.createElement('b');
    const citySpan: HTMLElement = document.createElement('span');
    const temSpan: HTMLElement = document.createElement('span');
    const sup: HTMLElement = document.createElement('sup');

    sup.innerText = weather.wea;
    citySpan.innerText = weather.city;
    temSpan.innerText = `${weather.tem}ºC`;
    b.appendChild(sup);
    b.appendChild(citySpan);
    b.appendChild(document.createElement('br'));
    b.appendChild(temSpan);
    if (!e) {
      type = Tpye.create;
    }
    switch (type) {
      case undefined || null || Tpye.child:
        e.appendChild(b);
        break;
      case Tpye.replace:
        e.replaceWith(b);
        break;
      case Tpye.create:
        return div.appendChild(b);

    }

  }
}

export enum Tpye {
  replace,
  child,
  create
}

3. then apply it to html 

....
 <div *ngIf="weather" #weatherDiv class="weather-float-right">
              {{weather|weather:weatherDiv:type}}
            </div>

.....

<style>
.weather-float-right {
  float: right;
  font-size: 1.2em;
}
.weather-float-right sup{
  font-size: 0.8em;
}
</style>

4. don't forget declaring it in module 

 

@NgModule({
  declarations: [
    WeatherPipe
],
...

 

 

 

 check this at gist