在 Angular2 中使用生成的 Swagger TypeScript Rest Client

Posted 2023-03-08

【中文标题】在 Angular2 中使用生成的 Swagger TypeScript Rest Client

【英文标题】：Using generated Swagger TypeScript Rest Client in Angular2

【发布时间】：2017-01-15 07:45:05

【问题描述】：

我正在使用 Angular 2 和 TypeScript 开发 Meteor Web 应用程序。为了使用 REST API，我使用 Swagger Codegen 生成了客户端代码。可惜GitHub上没有样例，如何使用其余客户端。

我有一个 Angular 2 视图组件，它正在注入一个 Angular 2 服务 (ProductTreeService) 和生成的 API（都标记为“@Injectable”）：

@Component(
    selector: 'panel-product-selection',
    template,
    providers: [ProductTreeService, UserApi],
    directives: [ProductTreeComponent]
)

export class PanelProductSelectionComponent

    private categoriesProductsTree: Collections.LinkedList<CategoryTreeElement>;
    private productTreeService: ProductTreeService;
    private userApi: UserApi;

    constructor(productTreeService: ProductTreeService, userApi: UserApi)
    
        this.productTreeService = productTreeService;
        this.userApi = userApi;
    

    ngOnInit(): void
    
        //...
    

虽然只能访问 Angular 服务并且一切正常，但当我注入 UserApi 时应用程序崩溃了。 UserApi和ProductTreeService的唯一区别就是构造函数：服务没有构造函数参数，生成的Api class有：

constructor(protected http: Http, @Optional()@Inject(BASE_PATH) basePath: string) 
    if (basePath) 
        this.basePath = basePath;
    

那么如何注入生成的 API？

【问题讨论】：

能否请您包含一些生成的代码？ UserApi，那不只是提供的示例吗？您链接到的代码并不意味着包含在项目中——它是生成代码的示例。

这是一个使用 Swagger Codegen 生成的 Typescript-angular2 API 客户端的示例：github.com/taxpon/ng2-swagger-example。这会有帮助吗？

【参考方案1】：

经过进一步研究，我得到了解决方案。其余客户端 UserApi 的构造函数期望 HTTP 提供程序如下：

constructor(protected http: Http, @Optional()@Inject(BASE_PATH) basePath: string) 
    if (basePath) 
        this.basePath = basePath;
    

来自 Java，我认为可能必须在注入此 API 的构造函数中以某种方式初始化此提供程序。实际上，这个初始化必须在包含注入组件的 NgModule 中完成，如 thread 中所述。

这个解决方案对我有用。

【参考方案2】：

老问题，但是……你应该这样做：

providers: [

  provide: API_BASE_URL, // or BASE_PATH
  useFactory: () =>  
      return environment.apiBaseUrl // or return just "your base url as text"
  
]

【讨论】：

您能否添加更多信息，说明为什么应该这样做。

哦，原来是缺少 Http Provider。我的解决方案是如何将基本 url 注入自动生成的客户端

@PaD 您能否举例说明当apiBaseUrl 来自 APP_INITIALIZER 上加载的配置 JSON 文件时如何执行此操作？

【参考方案3】：

我会使用带有 url 属性的 environment.ts 文件：

export const environment = 
  production: false,
  basePath: 'https://virtserver.swaggerhub.com/user/project/1.0.0'
;

然后在 app.module 中为服务提供配置：

  providers: [
     provide: BASE_PATH, useValue: environment.basePath ,
  ],

这适用于 Swagger 生成的代码。

希望对您有所帮助！ （更新到Angular6+）

https://blog.angulartraining.com/how-to-manage-different-environments-with-angular-cli-883c26e99d15