我有一个父组件和一个服务。我想传递变量的值
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");
});
}
}
答案 0 :(得分:0)
@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;
})
}
答案 1 :(得分:0)
@Output() 将帮助您传递数据并在这种情况下使用事件发射器;
@Output() methodName = new EventEmitter<any>();
答案 2 :(得分:0)
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>