Question

我创建了这个利用HttpService的{{1}}。在服务中，我有1个称为HttpClient的方法，该方法向模拟api发出http请求。在响应中，我不想获取getUserId()属性，而让userId返回getUserId()。

这个想法是能够通过创建userId的实例并调用userId方法来在组件中获取HttpService。我不知道这是否是正确的方法，但是httpservice的目的是处理所有http请求，并且通过在组件中创建它的实例，我可以根据需要的数据来访问其所有功能。我是Angular的新手。

如何使getUserId()返回http响应的getUserId()属性？

httpService ：

userId

Answer 1

只需将您的服务（私有地）注入到组件构造函数中，然后在任何需要的地方调用您的方法：

constructor(private httpService HttpService) {
    this.httpService.getUserId();
  }

在这里，您的方法将在构造函数中调用，否则，如果需要，您可以在不同的方法中调用它，因为服务已很好地注入到组件的构造函数中。
不要忘记在组件的文件中导入服务
最好在组件方面进行订阅，而不要在服务方面进行订阅
默认情况下，组件和服务应该彼此可见（例如，在相同的NgModule参数中）

Answer 2

您不应在服务中subscribe到this.http.get。相反，您应该在组件中完成此操作。

另外，您不必传递整个TODO对象，而必须map来返回一个带有userId键的对象，以便它满足提供Type的目的。 T到get的{{1}}方法。

HttpClient

现在在您的组件中：

import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http';
import { map } from 'rxjs/operators';

interface UserId {
  userId: number;
}

@Injectable({
  providedIn: 'root'
})
export class HttpService {

  constructor(private http: HttpClient) { }

  getUserId(){  
    return this.http.get<UserId>("https://jsonplaceholder.typicode.com/todos/1")
      .pipe(
        map(todo => ({ userId: todo.userId }))
      );
  }
}

侧面说明：Angular和TypeScript样式指南实际上并不建议在constructor(private http: HttpService) { } ... ngOnInit() { this.http.getUserId() .subscribe(userId => console.log(userId)); }名称前加上I前缀。所以我为你定了名字。

Answer 3

您需要更改服务，只需要按如下所示在组件中返回observable和 subscribe ，

服务

 getUserId(){  
    return this.http.get<IuserData>("https://jsonplaceholder.typicode.com/todos/1");
  }

以及组件中的

 this.http.getUserId().subscribe(userId => console.log(userId));

使用Angular中来自http响应的数据

3 个答案: