Angular 6将价值从一项服务传递到另一项服务？

Question

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

list.service.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));


    }
}

地理位置.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 的“新”http 模块。建议使用这个而不是旧的。它还会自动为您拨打json()。