Angular 5中如何将数据服务传入组件并获取API返回数据

我来帮你搞定这个问题～你现在的核心问题是：Service里的login方法是void类型，回调里的return data只是回调函数自己的返回值，并没有把数据传递给调用它的组件。咱们来改一下，让组件能拿到数据：

方案一：用Promise封装（简单直观） #

首先修改你的Service代码，把login方法改成返回Promise，这样就能把回调里的数据传递出去：

login(email:string, pwd:string): Promise<any> { 
  return new Promise((resolve) => {
    this.loginModule.verifyEmailLogin(email, pwd, (data)=>{ 
      console.log('user login data==>, ',data);
      resolve(data); // 把数据通过Promise传递给组件
    });
  });
}

然后在组件里用async/await调用这个方法，就能拿到数据了：

async saveLoginForm() :void{ 
  console.log('Saved: ' + JSON.stringify(this.loginForm.value)); 
  try {
    // 调用Service的login方法，等待返回数据
    const loginData = await this.yourServiceName.login(this.loginForm.value.email, this.loginForm.value.pwd);
    // 这里就拿到数据啦，想怎么处理都可以
    console.log('组件拿到的登录数据:', loginData);
    // 比如把数据存到组件的变量里
    this.userInfo = loginData;
  } catch (error) {
    // 处理登录失败的情况
    console.error('登录出错了:', error);
  }
}

方案二：用Observable（Angular推荐风格） #

如果你的项目是Angular，用Observable会更符合框架的设计习惯，还能方便处理后续的数据流：

先在Service里导入Observable，然后修改login方法：

import { Observable } from 'rxjs';

login(email:string, pwd:string): Observable<any> { 
  return new Observable((observer) => {
    this.loginModule.verifyEmailLogin(email, pwd, (data)=>{ 
      console.log('user login data==>, ',data);
      observer.next(data); // 把数据发送给订阅的组件
      observer.complete(); // 结束数据流
    });
    // 如果loginModule有错误回调的话，可以在这里添加错误处理：
    // , (error) => {
    //   observer.error(error);
    // }
  });
}

然后在组件里订阅这个Observable，获取数据：

import { Subscription } from 'rxjs';

// 定义一个订阅变量，用来销毁订阅防止内存泄漏
private loginSubscription?: Subscription;

saveLoginForm() :void{ 
  console.log('Saved: ' + JSON.stringify(this.loginForm.value)); 
  // 订阅Service的login方法返回的Observable
  this.loginSubscription = this.yourServiceName.login(this.loginForm.value.email, this.loginForm.value.pwd)
    .subscribe({
      next: (loginData) => {
        // 拿到数据后的处理逻辑
        console.log('组件拿到的登录数据:', loginData);
        this.userInfo = loginData;
      },
      error: (error) => {
        console.error('登录失败:', error);
      },
      complete: () => {
        console.log('登录请求完成');
      }
    });
}

// 组件销毁时取消订阅，避免内存泄漏
ngOnDestroy(): void {
  this.loginSubscription?.unsubscribe();
}

这样改完之后，组件就能顺利拿到Service里获取到的登录数据啦～

内容的提问来源于stack exchange，提问作者Rohit Azad Malik