Question

您能帮我解决问题吗？对不起，我的英语。所以我试图教Angular并编写一些简单的应用程序。但是我在将道具从服务传递到组件时遇到问题。

情况：我有一项服务，可以通过 getWeather（） 向API发送请求，并在道具 weatherCatalog 中设置答案。但是对于正确的构建URL，他需要通过方法 setUrl（） 和 setPosition（）

来获得用户协调>

@Injectable({
  providedIn: 'root'
})
export class WeatherService {
    key = 'dd6301427900459c863160646190201';
    weatherCatalog;
    queryString = '';

  constructor(private http: HttpClient) { }

  setUrl(position) {
    this.queryString = `http://api.worldweatheronline.com/premium/v1/weather.ashx?key=${this.key}&q=${position.coords.latitude},${position.coords.longitude}&num_of_days=14&tp=4&format=json`;

    this.getWeather()
  }

  getWeather() {
    this.http.get(this.queryString)
        .subscribe(
            res => this.weatherCatalog = res,
            err => console.error(err)
        );
  }

  setPosition() {
    navigator.geolocation.getCurrentPosition(this.setUrl.bind(this))
  }
}

此外，我还有一个组件，该组件尝试在组件属性 weather 中通过服务请求对象传递的副本。但是，当然有我的问题，它不起作用。我认为是因为在服务中组件属性中的set属性具有不确定的值。我试图以多种方式使用Observable和其他rxjs东西，但没有结果（我猜想我对此感到愧））。

@Component({
  selector: 'app-current-weather',
  templateUrl: './current-weather.component.html',
  styleUrls: ['./current-weather.component.scss']
})
export class CurrentWeatherComponent implements OnInit {
  weather;

  constructor(private weatherService: WeatherService) {
    this.weather = weatherService.weatherCatalog
  }

  ngOnInit() {
        this.weatherService.setPosition();
  }

}

我的想法是-获得用户协调，然后向API发送请求。得到答案并将其保存在服务属性中，然后将其传递到组件，然后在组件属性中将其复制。而且，如果要更改服务中的属性值，则组件中的属性值也应进行更改。

看起来很简单，但我真的很坚持。如果您能提出我无法实现的建议，或者在哪里可以阅读有关对我有帮助的工具，我将不胜感激。

Answer 1

我会这样：

PingSoundPool.loadpings(0, this@YourActivity)

在组件模板中：

PingSoundPool.loadpings(0, this)

在服务中：

import { Component } from '@angular/core';
import { Observable, of } from 'rxjs';

import { WeatherService } from './weather.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  weather$: Observable<any>;

  constructor(private weatherService: WeatherService) {
  }

  ngOnInit() {}

  async getWeather() {
    try {
      const position  = await this.weatherService.getCurrentPosition();
      this.weather$ = this.weatherService.getWeather(position);
    } catch(error) {
      this.weather$ = of(`You'll not get the Geolocation Services to work in this mode. Try Clicking on the 'Open in New Window LIVE' button to see if that works for you!`);
    }
  }
}

这是此实现的Working Demo。

这里是代码的Sample StackBlitz。

捕获Angular组件中的服务属性更改

1 个答案: