Angular 2 从服务到组件的传递值

Question

服务内部函数：

getUserInfo() {
  this.af.authState.subscribe(authData => {
    let email = authData.email;
    let array = this.database.list('registeredUsers', {
      query: {
        orderByChild: 'email',
        equalTo: email
      }
    }).subscribe(data => {
      let userFName = data[0].firstName;
    });
  });
}

组件：

ngOnInit() {
    this.afService.getUserInfo();
}

函数本身运行良好，但如何传递要在组件内使用的 let userFName 变量？

Answer 1

听起来您想要的是将其变成可注入服务。这将使您可以从任何组件调用它。

最好为 return 创建一个新的承诺，您可以在 database.list 调用解决后解决它。

@Injectable()
export class MyService() {
  public userFName;

  getUserInfo() {
    // return a new promise, which you resolve once you get the data
    return new Promise((resolve, reject) => {
      this.af.authState.subscribe(authData => {
        let email = authData.email;
        let array = this.database.list('registeredUsers', {
          query: {
            orderByChild: 'email',
            equalTo: email
          }
        }).subscribe(data => {
          let userFName = data[0].firstName;

          // resolve promise with username
          resolve(userFName);
        });
      });
    });
  }
}

和你的组件

@Component({
    providers: [MyService]
  )
}
export class MyComponent {
  constructor(private myService: MyService) {
    myService.getUserInfo().then(userFName => {
      console.log('userFName =', userFName);
    });
  }
}

Answer 2

如果您使用 @angular/http，您的 http 请求应该 return rxjs/Observable。一旦您订阅它，它就会 return 订阅。您无法重新订阅 class。

import {Observable} from "rxjs";
@Injectable()
export class MyService() {

    public userFName;
    getUserInfoPromise():Observable<MyResponseType> {
        let someObservable = this.someApi.someRequestPOST(request).mergeMap((response:MyResponsType) => {
         //you can process the response data here before components use it
              this.userFName = response.userFName;
              return new Promise(resolve => resolve(response));
         });
         return someObservable;
    }
}

而在你的组件中，只需以这种方式加入订阅链即可。

 this.myService
            .getUserInfoPromise(requestData)
            .subscribe(
                (res: MyResponseType) => {

                }, (error) => {

                });

Angular 2 从服务到组件的传递值

Angular 2 passing value from service to component

angular2-services

angular