Question

目前我在我的项目中使用 HTTP服务，所以我必须为每个请求调用HTTP服务，例如

 this.http.get((`${this._getAPI}}`))
        .map(res => res.json())
        .catch(err => Observable.throw(err.json().error));
}

工作正常，但必须为每个请求编写它，我想要的是为具有GET，POST，DELETE，EDIT等功能的HTTP请求创建Singleton类如何实现Singelton Http服务所以我没有为每个请求再次写这些行，只是想有一些像这样的

HttpService.callTheGetApi()//its just dummy example

其中HttpService应该是具有单个实例的Singelton类。

Answer 1

创建服务HttpService并仅在app.module.ts中指定其提供者。如果您不在任何组件中指定此服务的提供程序，则每当您尝试将其注入组件时，Angular将尝试查找其提供程序。由于它没有在组件级别定义，因此它将检查其父级，祖父级，并最终到达声明提供程序的根模块。在这种情况下，Angular将使用由应用级注入器创建的此服务的唯一实例。

Answer 2

您应该创建一个包装api调用的服务。类似的东西。

@Injectable()
export class BackendService {

  constructor(private http: Http) {}

  callTheGetApi() : Observable<any> {
    this.http.get((`${this._getAPI}}`))
      .map(res => res.json())
      .catch(err => Observable.throw(err.json().error));
  }
}

然后（如Yakov建议的那样），在组件树顶部附近提供模块，如核心模块或app模块。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { ackendService } from './backend.service';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    HttpModule,
  ],
  declarations: [
  ],
  providers: [
    BackendService
  ]
})
export class AppModule { }

然后，在您希望进行api调用的任何组件中，您将注入BackendService。

import { BackendService } from 'app/core/backend.service';

@Component({
  selector: 'app-some-comp',
  templateUrl: './some-comp.component.html',
})
export class SomeCompComponent {
  constructor(private backend: BackendService) {}

  someMethod() {
      this.backend.callTheGetApi().subscribe(() => {
        // handle the response
      });
  } 
}

Angular 2：创建Singelton类HTTP服务

2 个答案: