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

Question

我有几个组件在做同样的工作。
每个人都只使用不同的参数进行相同的 API 调用:

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

出于某种原因，我不想在每个组件中编写相同的代码。例如，在 Java 中，我在这种情况下使用父类(super class)。在 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);
  }
}

问题是我必须使用注入(inject) HttpClient 的构造函数。 .我不希望这样，因为我必须传递其他依赖项(与问题无关)。
最佳实践也是如此，如果是，我该如何使用 HttpClient没有通过吗？

Answer 1

您应该使用 map在您的服务中执行常见的处理，然后再将结果返回给组件。

服务应该向调用组件返回一个 observable。然后，组件可以进一步处理该点的结果。

这可能只是示例，但不要使用 any如果有帮助，请改为定义一个接口(interface)并使用它来定义响应和返回类型。这为您的代码增加了类型安全性，这是创建 typescript 的主要原因之一。

您应该将服务注入(inject)到组件中。真的，您应该始终对任何依赖项使用注入(inject)。如果您要执行不同的操作，请创建不同的方法来在您的服务中处理它们或创建带参数的方法。根据我的经验，没有理由手动创建 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;
    });
  }
}