Определение местоположения с помощью Angular 7

Question

У меня проблема с определением местоположения с помощью Angular.

Я знаю, что для определения местоположения я использую API геолокации HTML5.

window.navigator.geolocation.getCurrentPosition(
    (position) => {
      /* Location tracking code */
      this.currentLocation = position.coords;
      callback(position.coords);
    },
    (failure) => {
      if (failure.message.indexOf("Only secure origins are allowed") == 0) {
        alert('Only secure origins are allowed by your browser.');
      }
    }
  );

Моя проблема в том, что когда я использую внутри углового класса, «this» всегда указывает на функцию успеха, а не на сам класс. Как получить доступ к свойствам класса?

Пожалуйста, ознакомьтесь с полным циклом кода ниже.

Целевая страница

@Component({
  selector: 'app-landing-page',
  templateUrl: './landing-page.component.html',
  styleUrls: ['./landing-page.component.css']
})
export class LandingPageComponent implements OnInit {
  weatherDetailsArray: any = [];
  searchQuery: string = "";
  hasError: boolean = false;
  errorMessage: string = "";

  constructor(private _weatherService: WeatherService) { }

  ngOnInit() {
    // I get the location here and pass the function to be executed in the success callback
    this._weatherService._getLocation(this.detectLocation);
  }

  detectLocation (position) {
    const latLang = `${position.latitude}/${position.longitude}`;
    // "this" is undefined here
    this._weatherService.getCityWeatherDetails(latLang)
      .subscribe((res: any) => {
        let weatherDetails = this.mapWeatherResponse(res);
        this.weatherDetailsArray.push(weatherDetails);
      });
  }
}

код в WeatherService

@Injectable({
  providedIn: 'root'
})
export class WeatherService {
  private _baseUrl = "http://api.worldweatheronline.com/premium/v1/weather.ashx?key={some api key}&format=json";
  private currentLocation: any = {};

  constructor(private http: HttpClient) {}

  _getLocation(callback): void {
    if (window.navigator.geolocation) {
      window.navigator.geolocation.getCurrentPosition(
        (position) => {
          // "this" here in the weather service is seen however currentLocation is always ""
          this.currentLocation = position.coords;
          callback(position.coords);
        },
        (failure) => {
          if (failure.message.indexOf("Only secure origins are allowed") == 0) {
            alert('Only secure origins are allowed by your browser.');
          }
        }
      );
    }
    else {
      console.log("Your browser doesn't support geolocation");
    }
  }

  getCityWeatherDetails(cityName: string = "Egypt") {
    return this.http.get(`${this._baseUrl}&num_of_days=5&includelocation=yes&tp=24&q=${cityName}`);
  }
}

Мой вопрос здесь, как я могу получить доступ к этому ._weatherService.getCityWeatherDetails (latLang)

Answer 1

Ваш обратный вызов вызывается как функция вместо метода, поэтому он теряет свой this контекст:

this._weatherService._getLocation(this.detectLocation);

Попробуйте это:

this._weatherService._getLocation(position => this.detectLocation(position));

Или это:

this._weatherService._getLocation(this.detectLocation.bind(this));

Или переключиться на функцию стрелки:

detectLocation = (position) => { ... }