Angular 4/5 HttpClient 自定义服务 [重复]答案

【问题标题】：Angular 4/5 HttpClient custom service [duplicate]Angular 4/5 HttpClient 自定义服务 [重复]
【发布时间】：2017-11-23 12:38:54
【问题描述】：

我对 Angular 很陌生，但我会做一件非常简单的事情（而且我做不到）...我想创建一个“基础服务”，它与我的 api 后端通信，但在设置一些之前东西（标题，变量......等等）......所有其他服务都必须调用这个“基础服务”来与api通信......这是我的代码：

import { Injectable } from '@angular/core';
import { HttpClient, HttpRequest, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Rx';
import { responseModel } from '../models/response.model';

@Injectable()
export  class  BaseService {

    public headers: HttpHeaders;

    constructor(private _http: HttpClient) {  
        this.headers = new HttpHeaders();
        this.headers.append('Accept', 'application/json, */*');
        this.headers.append('Content-Type', 'application/json;charset=UTF-8');
    }

    private callBackEnd(relativeEndPoint: string,reqMethod: string,
        reqParams?: HttpParams, objBody?: any): Observable<responseModel> {

        const reqUrl = 'https://mypath/' + relativeEndPoint;
        return this._http.request<responseModel>(reqMethod, reqUrl,
            {
                body: objBody,
                headers: this.headers,
                params: reqParams,
                responseType: 'json',
                withCredentials: true
            }
        );
    }

    handleError(error: any): Observable<responseModel> {
        const out: responseModel= {
            error: !error.ok,
            code: "10",
            message: "no connection",
            more_info: "info@cr",
            response: {}
        }

        return Observable.create(observer => {
            observer.next(out);
            observer.complete();
        });
    }
}

这很简单...每个有 'BaseService' 的 DI 的服务都可以调用

/*IMPORT EVERYTHING*/

@Injectable()
export class CustomService {

  constructor(private _http: BaseService) {

  }

  examplefunction(): Observable<responseModel> 
  {
      return this._http.callBackEnd( '/user/', 'GET')
      .map(
          response => {
               console.log( JSON.stringify(response));
          return response;
          }
          )
   }

}

我创建了一个简单的组件

import { Component, OnInit } from '@angular/core';
import { CustomService } from './CustomService.service';
import { responseBE } from '../global/models/response.model';

@Component({
  selector: 'app-simple',
  templateUrl: './simple.component.html',
  styleUrls: ['./simple.component.css']
})
export class SimpleComponent implements OnInit {

  constructor(private _service: CustomService ) { }

  ngOnInit() {

    this._service.examplefunction()
      .map(res => {
        console.log(res);
      });
  }

}

但没有任何效果:(

有什么想法吗？

【问题讨论】：

你遇到 JS 错误了吗？
没什么...一切似乎都很完美，但似乎没有提出任何获取请求
很奇怪，因为您在 BaseService 中的 callBackEnd 是私有的。所以，进入 CustomService 你不能访问它
正如@mickaelw 所说，您需要从 callBackEnd 方法中删除私有修饰符。
你需要订阅一个 observable 才能让事情发生。你没有在任何地方这样做。

标签： angular service dependency-injection angular4-httpclient

【解决方案1】：

我认为您缺少订阅，因为 Observable 需要订阅才能执行。

this._service.examplefunction()
  .subscribe(res => {
    console.log(res);
  });

【讨论】：