如何将数据服务传递到 angular 5 中的组件

Question

我向 api 请求获取服务中的数据，但不知道如何在组件中获取这些数据？我已经尝试 google 但没有找到任何解决方案。

服务文件

login(email:string, pwd:string):void{
  this.loginModule.verifyEmailLogin(email, pwd, (data)=>{
    console.log('user login data==>, ',data)
    return data;
  })
}

这里我得到了控制台中的数据

组件文件 js

saveLoginForm() :void{
  //console.log(this.loginForm);
  console.log('Saved: ' + JSON.stringify(this.loginForm.value));
  this._userAuthService.login(this.loginForm.value.userEmail, this.loginForm.value.userPwd)

}

Answer 1

您可以创建 return 一个 Promise 来解析 this.loginModule.verifyEmailLogin 回调中的数据。

login(email:string, pwd:string): Promise<any>{
  return new Promise<any>(resolve => {
    this.loginModule.verifyEmailLogin(email, pwd, (data)=>{
      console.log('user login data==>, ',data)
      //return data;
      resolve(data);
    });
  });
}

然后通过Promise.then

获取组件解析数据

this._userAuthService.login(this.loginForm.value.userEmail, this.loginForm.value.userPwd).then(data => {
  // deal anything with the data
})

Return一个Observable也能解决问题。

Answer 2

假设您的 loginModule.verifyEmailLogin returns 从您的 http 调用中观察到的

服务文件

login(email:string, pwd:string): Observable<any>{
    return this.loginModule.verifyEmailLogin(email, pwd, (data))
}

组件文件 js

saveLoginForm() :void{
    this._userAuthService.login(this.loginForm.value.userEmail, this.loginForm.value.userPwd)
       .subscribe(
           (data) => console.log(data),
           (error) => console.log(error)
       )

  }

如何将数据服务传递到 angular 5 中的组件

how to pass data service into components in angular 5

javascript

angular-services

angular

angular5