angular - Angular / TS - 如何从组件调用函数到服务并获取返回值
问题描述
我有一个调用“getUserDocInfo()”的组件,它在它自己的服务中。我将如何调用该函数,然后将返回的数据用于进一步的代码?
我的组件
getToken(){
this.userService.getUserDocInfo();
// once this is called I would like to use some of the values in the returned data
}
我的服务
getUserDocInfo() {
this.getUserInfo().then(() => {
this.userDoc = this.afs.doc(`users/${this.userID}`);
this.user = this.userDoc.snapshotChanges();
this.user.subscribe(value => {
const data = value.payload.data();
});
})
}
async getUserInfo() {
const user = await this.authService.isLoggedIn()
if (user) {
this.userID = user.uid;
} else {
// do something else
}
}
任何有关最佳实践的帮助将不胜感激。
解决方案
一种方法是实现一个回调,您将传递方法参数。像这样的东西。
getUserDocInfo(callback) {
this.getUserInfo().then(() => {
this.userDoc = this.afs.doc(`users/${this.userID}`);
this.user = this.userDoc.snapshotChanges();
this.user.subscribe(callback);
})
}
getToken(){
this.userService.getUserDocInfo((value) => {
console.log(value.payload.data());
});
}
您也可以返回一个Observable
并在您的组件上下文中订阅它,您可以根据需要处理订阅。
import { Observable } from 'rxjs/Observable/';
import 'rxjs/add/observable/fromPromise';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
@Injectable()
export class AlertService {
//constructor and properties...
getUserDocInfo(): Observable<any> {
Observable.fromPromise(this.getUserInfo()).mergeMap(() => {
this.userDoc = this.afs.doc(`users/${this.userID}`);
this.user = this.userDoc.snapshotChanges();
return this.user.map(user => user);
});
}
}
@Component(...)
export class MyComponent implements OnDestroy {
subscriptions: Array<Subscription> = new Array;
//constructor
getToken(){
const sub = this.userService.getUserDocInfo().subscribe((value) => {
console.log(value.payload.data());
});
this.subscriptions.push(sub);
}
ngOnDestroy() {
this.subscriptions.forEach(sub => sub.unsubscribe());
}
}
推荐阅读
- java - 更改 JTabbedPane 选项卡后面的背景颜色?
- oracle - 为什么我的存储过程在我运行 EXEC 命令时运行良好,但在我的数据库链作业中却无法运行?(甲骨文)
- django - 仅从 django 中的 url 播放 youtube 音频
- java - 使用 Volley 将 ESP8266 与 AndroidApp 通信
- flutter - 如何在 ListView Widget 中使用 markdown 包(对于带有项目符号的文本)?在 ListView 中使用时没有显示
- javascript - Sentry:从文件夹树上传源地图
- python - 将 2D 数据帧转换为 3D 数据帧
- python-3.x - 使用 tensorflow(keras)进行深度学习中的 CPU-GPU 配置是什么意思?
- javascript - 列表不保留 C# 模型上的值
- node.js - 有什么方法可以使后端不必在 Node JS 中多次请求数据库获取数据?