Question

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

mMeasuredDistanceInKM

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

@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>

apiservice：

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 指令仅适用于组件。为了通过服务在组件之间交换数据，您必须使用 Dependency Injection。

所以在你的两个组件中你都必须注入你的服务：
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 operators，例如 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>();

you can refer this Component interaction link in 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
正如您在评论中所说，它显示未定义，您可以使用异步管道来等待响应。

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

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

3 个答案: