Question

也许有人可以提供帮助。我尝试使用组件中的默认服务与REST API通信到后端python-Server。我尝试在角度中使用swagger-codegen生成的ng2客户端。 Python服务器也是由swagger生成的。服务器正在运行，

import { Inject, Injectable, Optional } from '@angular/core';
import { Http, Headers, URLSearchParams } from '@angular/http';
import { RequestMethod, RequestOptions, RequestOptionsArgs } from '@angular/http';
import { Response, ResponseContentType } from '@angular/http';

import { Observable } from 'rxjs/Observable';
import '../rxjs-operators';

import { InlineResponseDefault } from '../model/inlineResponseDefault';

import { BASE_PATH, COLLECTION_FORMATS } from '../variables';
import { Configuration } from '../configuration';
import { CustomQueryEncoderHelper } from '../encoder';


@Injectable()
export class DefaultService {

    protected basePath = 'http://127.0.0.1:8080/v1';
    public defaultHeaders = new Headers();
    public configuration = new Configuration();

    constructor(protected http: Http, @Optional()@Inject(BASE_PATH) basePath: string, @Optional() configuration: Configuration) {
        if (basePath) {
            this.basePath = basePath;
        }
        if (configuration) {
            this.configuration = configuration;
            this.basePath = basePath || configuration.basePath || this.basePath;
        }
    }

    /**
     * @param consumes string[] mime-types
     * @return true: consumes contains 'multipart/form-data', false: otherwise
     */
    private canConsumeForm(consumes: string[]): boolean {
        const form = 'multipart/form-data';
        for (let consume of consumes) {
            if (form === consume) {
                return true;
            }
        }
        return false;
    }


    public isJsonMime(mime: string): boolean {
        const jsonMime: RegExp = new RegExp('^(application\/json|[^;/ \t]+\/[^;/ \t]+[+]json)[ \t]*(;.*)?$', 'i');
        return mime != null && (jsonMime.test(mime) || mime.toLowerCase() === 'application/json-patch+json');
    }

    /**
     * Abort the programm in the project identified by UUID
     * @param UUID The UUID
     */
    public abortProject(UUID: string, extraHttpRequestParams?: RequestOptionsArgs): Observable<{}> {
        return this.abortProjectWithHttpInfo(UUID, extraHttpRequestParams)
            .map((response: Response) => {
                if (response.status === 204) {
                    return undefined;
                } else {
                    return response.json() || {};
                }
            });
    }

    /**
     * delete a single file at a specified path
     * @param UUID The UUID
     * @param path The path where to upload.
     */
    public deleteFile(UUID: string, path: string, extraHttpRequestParams?: RequestOptionsArgs): Observable<{}> {
        return this.deleteFileWithHttpInfo(UUID, path, extraHttpRequestParams)
            .map((response: Response) => {
                if (response.status === 204) {
                    return undefined;
                } else {
                    return response.json() || {};
                }
            });
    }

    /**
     * Testing the connection
     */
    public ping(extraHttpRequestParams?: RequestOptionsArgs): Observable<string> {
        return this.pingWithHttpInfo(extraHttpRequestParams)
            .map((response: Response) => {
                if (response.status === 204) {
                    return undefined;
                } else {
                    return response.json() || {};
                }
            });
    }

我的app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { DefaultService } from './rest/api/default.service';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [DefaultService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

我尝试在我的contsructor中注入default.service，然后浏览器给出消息ERROR NO PROVIDER FOR HTTP Injection error ..... 我在ng和ts中完全是新手:-(。之后我为控制台定义了一个函数getPing，记录了服务器的答案。

import { Component, OnInit } from '@angular/core';
import { InlineResponseDefault } from '../app/rest';
import { HttpClient, } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Response } from '@angular/http';
import { DefaultService } from './rest/api/default.service';
import { HttpClientModule } from '@angular/common/http';



@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  title = 'app';


  constructor(private defaultService: DefaultService, public http: HttpClient) {

  }

  getPing() {
    console.log(this.defaultService.ping);
      }

}

Answer 1

问题是在app.module.ts中你是从 @ angular / common / http 导入HttpClientModule而在你的服务中，你试图从 @注入HttpClient角/ HTTP 。这些是与Http客户端不同的版本， @ angular / common / http 是最新版本。

将您的服务更改为：

import { HttpClient } from '@angular/common/http';
//
@Injectable()
export class DefaultService {
  constructor(protected http: HttpClient, @Optional()@Inject(BASE_PATH) basePath: string, @Optional() configuration: Configuration) {

Answer 2

您在一个地方获得了Http而在另一个地方获得了HttpClient。我强烈推荐reading the documentation。我打算假设您打算使用HttpClient，但如果您想使用Http，请参阅this other documentation。

在 default.service.ts 中更新您的构造函数以使用HttpClient：

constructor(protected http: HttpClient, ... other params ...)

在 app.component.ts ：

删除HttpClient构造函数参数：

constructor(private defaultService: DefaultService) {}

更新您的getPing()方法，以便在默认服务上实际调用ping()方法：
```
console.log(this.defaultService.ping()); 
```
没有()它返回一个函数引用而不是调用该函数。
删除HttpClientModule的导入。您只需要在app.module.ts文件中。

你的app.module.ts没问题。

实际上我不知道默认服务是如何编译的，因为它似乎在调用一大堆只是......不存在的方法。

正如我之前提到的，这是HttpClient。如果您想使用Http，则需要使用HttpModule。请参阅我上面链接的文档，但建议您使用HttpClient。

Answer 3

冻结的@Roddy就是我的整个default.service.ts。你说如果我有这个方法我需要调用myArray但我认为如果我ping服务器我可以使用我的default.service ping。我只是意识到我在浏览器中的角度应用程序是空的。 HTML将不会显示....这令人沮丧。

this.http.post("http://example.com/api/abortProjectWithHttpI‌nfo",...)

Angular4和Swagger客户端

3 个答案: