Question

我有几个相同的组件。每个人都只使用不同的参数进行相同的API调用：

this.http.get('url' + parameter).subscribe((data: Array<any>) => {
   //some state dispatches and other stuff
   return response;
});

出于某种原因，我不想在每个组件中编写相同的代码。例如，在Java中，在这种情况下，我使用超类。在大多数情况下，Angular服务已足够。但在这种情况下不是。我试图写一个新的课：

export class Content {
   constructor(private http: HttpClient) { }
   getContent() {
     this.http.get('url' + parameter).subscribe((data: Array<any>) => {
       //some state dispatches and other stuff
       return response;
     });      
   }
}

现在我可以在每个组件中初始化此类，并且可以正常工作：

export class MyComponent {
  constructor(private http: HttpClient) { }
  toggle() {
    new Content(http);
  }
}

问题是我必须在注入httpClient的地方使用构造函数。我不希望这样，因为我必须传递比httpClient更多的信息给此方法（与该问题无关）。那是最佳实践吗？如果是的话，如何在不通过的情况下使用httpClient？

Answer 1

只需将@Injectable放在创建服务的类之前，然后就可以将服务注入到app.module.ts的提供者中

@Injectable()
export class Service {
  constructor(
      private http: HttpClient,
  ) {}

  getContent() {
     this.http.get('url' + parameter).subscribe((data: Array<any>) => {
       //some state dispatches and other stuff
     });      
   }
}

然后您可以在导入服务的其他组件的构造函数中使用它：）

constructor(private service: Service) { }

Answer 2

您应该在服务中使用map来执行通用处理，然后将结果返回给组件。
该服务应将一个observable返回给调用组件。然后组件可以从该点进一步处理结果。
这可能仅用于示例，如果可以帮助，请不要使用any，而是定义一个接口，然后使用该接口来定义响应和返回类型。这为您的代码增加了类型安全性，这是开始创建打字稿的主要原因之一。
您应该将服务注入到组件中。确实，您应该始终对任何依赖项使用注入。如果要执行不同的操作，请创建不同的方法以在服务中处理它们，或者创建带有参数的方法。根据我的经验，没有理由手动创建HttpClient的实例。

以下是我认为您要问的非常普遍的方法。

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

@Injectable()
export class ContentService {
   constructor(private http: HttpClient) { }

   getContent() : Observable<Array<any>> {
     return this.http.get<Array<any>>('url' + parameter).pipe(map((data: Array<any>) => {
       // common processing here
       return data;
     }));
   }
}

@Component({})  
export class MyComponent {
  constructor(private contentService: ContentService) { }

  data: Array<any> = [];
  toggle() {
    this.contentService.getContent().subscribe(data => {
      // do something with returned data like...
      this.data = data;
    });
  }
}

Answer 3

创建一个Service。将服务导入所需的任何组件，然后在服务内部导入HttpClient。

这里是docs。

Answer 4

使用file_identifier创建服务。使用返回httpClient的函数。在此函数内使用http请求。在您的组件中，只需获取服务的实例并在promise返回值后执行所需的任何操作

service.ts

promise

component.ts

 export class ContentService {
   constructor(private http: HttpClient) { }
   getContent(): Promise<any> {
     this.http.get('url' + parameter).subscribe((data: Array<any>) => {
       return new Promise(resolve => resolve('whatever'));
     });      
   }
}

多个组件Angular 6中的相同代码

4 个答案: