如何将值从服务传递到父组件

Question

我有一个父组件和一个服务。 我想传递变量的值

mMeasuredDistanceInKM

到主要组件。 因此我在服务中创建了一个 output 变量，如下所示

@Output() EventEmittermMeasuredDistanceInKM: EventEmitter<string>= new EventEmitter();

现在我想从

@Output() EventEmittermMeasuredDistanceInKM

在主要成分中。 当服务没有模板时我该怎么做

代码：

<button class="btn btn-sm btn-icon"  data-title= {{}} (click)="editTopography()" data-tooltip="text"> <clr-icon shape="pencil"></clr-icon></button>

api服务：

import { Injectable, Output, EventEmitter } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  API_KEY = '5b3ce3597845532301cf62480erve403567479a87de01df5da651gy';

  mResponseAsJSON;
  mMeasuredDistance;
  mMeasuredDistanceInKM;

  @Output() EventEmittermMeasuredDistanceInKM: EventEmitter<string>= new EventEmitter();
  constructor(private httpClient: HttpClient) { }

  public getDistanceBetweenCoordinates(lng1,lat1,lng2, lat2) {

    return this.httpClient.get(
      "https://api.openrouteservice.org/v2/directions/driving-car?api_key=5b3ce3597845532301cf62480erve403567479a87de01df5da651gy&start="+ lng1+"," + lat1+ "&end="+lng2+","+lat2)
      .subscribe((data)=>{
        this.mResponseAsJSON = data;
        this.mMeasuredDistance = data["features"][0]['properties']['summary']['distance'];
        this.mMeasuredDistanceInKM = this.mMeasuredDistance/1000;
        this.EventEmittermMeasuredDistanceInKM.emit(this.mMeasuredDistanceInKM)
        console.log("DistanceBetweenGivenCoordinates = " + this.mMeasuredDistanceInKM + " Km");
    });
} 
}

Answer 1

@Output和@Input指令仅适用于Components 。 为了通过服务在组件之间交换数据，您必须使用依赖注入。

因此，在您的两个组件中，您都必须注入您的服务：
constructor(private apiService: ApiService)

由于您的数据是通过 httpClient 异步传输的，因此您必须在组件中使用Observable 。 您可以返回 observable 本身并在您的组件中订阅它，而不是在您的服务中订阅它并返回订阅。

// your service method:
public getDistanceBetweenCoordinates(lng1,lat1,lng2, lat2) {
  return this.httpClient.get("https://api.openrouteservice.org/v2/directions/driving-car?api_key=5b3ce3597845532301cf62480erve403567479a87de01df5da651gy&start="+ lng1+"," + lat1+ "&end="+lng2+","+lat2);
}

// somewhere in your component:
this.apiService.getDistanceBetweenCoordinates(lng1, lat1, lng2, lat2).subscribe((data) => {
  // now you have the data in your components
})

如果您想在组件接收数据之前使用或更改服务中的数据，您可以使用 rxjs运算符，例如tap或map ：

public getDistanceBetweenCoordinates(lng1,lat1,lng2, lat2) {

    return this.httpClient.get(
      "https://api.openrouteservice.org/v2/directions/driving-car?api_key=5b3ce3597845532301cf62480erve403567479a87de01df5da651gy&start="+ lng1+"," + lat1+ "&end="+lng2+","+lat2)
      .pipe(map(data) => {
        // to just get the "measuredDistanceInKM" in the subscribe:
        return data["features"][0]['properties']['summary']['distance']/1000;
      })
} 

Answer 2

@Output() 将帮助您在这种情况下传递数据并使用事件发射器；

@Output() methodName = new EventEmitter<any>();

您可以参考 Angular 中的此组件交互链接

Answer 3

api服务

import { Injectable, Output, EventEmitter } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  API_KEY = '5b3ce3597845532301cf62480erve403567479a87de01df5da651gy';

  mResponseAsJSON;
  mMeasuredDistance;
  mMeasuredDistanceInKM;

  EventEmittermMeasuredDistanceInKM_changed = new EventEmitter<string>();
  
  constructor(private httpClient: HttpClient) { }

  public getDistanceBetweenCoordinates(lng1,lat1,lng2, lat2) {

    return this.httpClient.get(
      "https://api.openrouteservice.org/v2/directions/driving-car?api_key=5b3ce3597845532301cf62480erve403567479a87de01df5da651gy&start="+ lng1+"," + lat1+ "&end="+lng2+","+lat2)
      .subscribe((data)=>{
        this.mResponseAsJSON = data;
        this.mMeasuredDistance = data["features"][0]['properties']['summary']['distance'];
        this.mMeasuredDistanceInKM = this.mMeasuredDistance/1000;
        this.EventEmittermMeasuredDistanceInKM_changed.emit(this.mMeasuredDistanceInKM)
        console.log("DistanceBetweenGivenCoordinates = " + this.mMeasuredDistanceInKM + " Km");
    });
} 
}

主要组件.ts
在您需要订阅发射值更改的任何组件中，您需要注入它，如下所示

EventEmittermMeasuredDistanceInKM_subscription:Subscription;
EventEmittermMeasuredDistanceInKM : string;


  constructor(private apiser:apiservice) { }
    
    
  ngOnInit(): void {
      
      this.EventEmittermMeasuredDistanceInKM_subscription = this.apiser.EventEmittermMeasuredDistanceInKM_changed.subscribe((EventEmittermMeasuredDistanceInKM)=>{
      this.EventEmittermMeasuredDistanceInKM = EventEmittermMeasuredDistanceInKM;
    })

  }

不要忘记取消订阅“EventEmittermMeasuredDistanceInKM_subscription”
仅供参考 建议使用 Subject 而不是 EventEmitter

html
正如您在评论中所说，它显示未定义您可以使用 async pipe 等待响应。

<h3>{{ EventEmittermMeasuredDistanceInKM | async  }}</h3>