javascript - Angular 6 将值(value)从一项服务传递到另一项服务？

Question

我正在尝试在我的列表服务中使用来自地理定位服务的纬度和经度。不幸的是，这一直以未定义的形式返回。不太确定是什么问题。

列表.服务.ts

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent, SubscriptionLike, PartialObserver } from 'rxjs';
import { List } from '../models/list.model';
import { map } from 'rxjs/operators';
import { GeolocationService } from '../services/geolocation.service';

@Injectable()
export class ListService {

    constructor(private http: Http, private geoServ: GeolocationService) { }

    getLongitude() {
        this.geoServ.getLongitude().subscribe((longitude) => {
            console.log(longitude)
        });
    }

    private serverApi = 'http://localhost:3000';



    public getAllLists(): Observable<List[]> {

        const URI = `${this.serverApi}/yelp/${longitude}/${latitude}`;

        return this.http.get(URI)
            .pipe(map(res => res.json()))
            .pipe(map(res => <List[]>res.businesses));


    }
}

geolocation.service.ts

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

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

  constructor() { }

  getGeoLocation() {
    console.log('Geolocation working!');
    const options = {
      enableHighAccuracy: true,
      timeout: 5000,
      maximumAge: 0
    };
    const success = (pos) => {
      const crd = pos.coords;
      console.log(`Latitude : ${crd.latitude}`);
      console.log(`Longitude : ${crd.longitude}`);
    };
    const error = (err) => {
      console.warn(`ERROR(${err.code}): ${err.message}`);
    };
    navigator.geolocation.getCurrentPosition(success, error, options);
  }


  getLongitude() {
    console.log('Geolocation working!');
    const options = {
      enableHighAccuracy: true,
      timeout: 5000,
      maximumAge: 0
    };
    const success = (pos) => {
      const crd = pos.coords;
      console.log(`Longitude : ${crd.longitude}`);
      const longitude = crd.longitude;
      return longitude;
    };
    const error = (err) => {
      console.warn(`ERROR(${err.code}): ${err.message}`);
    };
    navigator.geolocation.getCurrentPosition(success, error, options);
  }
}

感谢您抽出宝贵的时间来看这篇文章。我感谢对下面我的附加问题的进一步帮助。 text text text text 不允许我发帖，直到我添加更多详细信息 text text text text。

Answer 1

你没有从你的方法中返回任何东西。您应该使用 return 语句。您还需要使用回调函数、promise 或 observable。我会给你一个可观察的例子:

getLongitude() {
  this.geoServ.getLongitude().subscribe((longitude) => {
    console.log(longitude)
  });
}

并更改您的getLongitude:

getLongitude() {
  return new Observable((observer) => {
    console.log('Geolocation working!');
    const options = {
      enableHighAccuracy: true,
      timeout: 5000,
      maximumAge: 0
    };
    const success = (pos) => {
      const crd = pos.coords;
      console.log(`Longitude : ${crd.longitude}`);
      const longitude = crd.longitude;
      observer.next(longitude);
      observer.complete();
    };
    const error = (err) => {
      console.warn(`ERROR(${err.code}): ${err.message}`);
      observer.error(err);
      observer.complete();
    };
    navigator.geolocation.getCurrentPosition(success, error, options);
  });  
}

如果您想在 getAllList 方法中获取经度和纬度，您可以使用 mergeMap 运算符:

public getAllLists(): Observable<List[]> {
  return this.geoServ.getGeoLocation().pipe(
    mergeMap(({ latitude, longitude}) => 
      this.http.get(`${this.serverApi}/yelp/${longitude}/${latitude}`)
    ),
    map(res => res.businesses)
  );
}

我在这里使用 HttpClient。这是来自 angular 的"new"http 模块。建议使用这个而不是旧的。它还会自动为您执行 json() 调用。