Angular / TS - как вызвать функцию из компонента в службу и получить возвращаемое значение - PullRequest
Новая
       23

Angular / TS - как вызвать функцию из компонента в службу и получить возвращаемое значение

0 голосов
/ 20 сентября 2018

У меня есть компонент, который вызывает 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
    }
  }

Любая помощь по передовым методам здесь будет принята с благодарностью.

1 Ответ

0 голосов
/ 20 сентября 2018

Один из способов сделать это - реализовать обратный вызов, который вы передадите в параметры метода.Примерно так. 

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());
  }
}
...