将 Swagger 编辑器添加到 Angular 项目

Question

我想将 Swagger UI 和 Swagger Editor 插入到我的 Angular 项目中。这样它看起来像这样：http://editor.swagger.io/?docExpansion=none

感谢以下说明，我已经能够将 Swagger UI 添加到我的 Angular 项目中：https://github.com/agoncal/swagger-ui-angular6

仍然缺少 Swagger 编辑器，用户可以在其中编辑 OpenAPI 规范（请参阅第一个 link 的左侧）。

我的应用程序的目标状态应该是加载了 OpenAPI 规范，然后用户可以直观地了解 API 并且还应该能够编辑此 API 通过 Swagger 编辑器（缺失部分）。第一个 link.

的功能差不多

所以我的问题是，如何在我的 Angular 项目中实施 Swagger 编辑器？我在互联网上没有找到任何相关信息。

Answer 1

您可以使用 swagger-editor-dist 包来实现。

npm i swagger-editor-dist --save

安装依赖项后，您必须包含所需的脚本和 css 文件。您可以在 angular.json 文件

中执行此操作

"styles": [
   "node_modules/swagger-editor-dist/swagger-editor.css",
   "src/styles.css"
 ],
"scripts": [
   "node_modules/swagger-editor-dist/swagger-editor-bundle.js",
   "node_modules/swagger-editor-dist/swagger-editor-standalone-preset.js"
 ]

下一步是准备要放置编辑器的 html。选择您的任何组件并添加

<div id="swagger-editor"></div>

最后一步是将编辑器实例化为 div。在同一个组件中，添加这个

declare const SwaggerEditorBundle: any;
declare const SwaggerEditorStandalonePreset: any;
....
....
ngOnInit(): void {
  const editor = SwaggerEditorBundle({
    dom_id: '#swagger-editor',
    layout: 'StandaloneLayout',
    presets: [
      SwaggerEditorStandalonePreset
    ],
    url: 'http://rackerlabs.github.io/wadl2swagger/openstack/swagger/dbaas.json'
  });
}

我还为此创建了一个示例应用程序。

随时查看我的 Github Repo - Swagger Editor Angular 8

Answer 2

import { Component, OnInit } from '@angular/core';

declare const SwaggerEditorBundle: any;
declare const SwaggerEditorStandalonePreset: any;

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

export class AppComponent implements OnInit {
  title = 'angular-swagger-editor';

  ngOnInit(): void {

    const editor = SwaggerEditorBundle({
      dom_id: '#swagger-editor',
      layout: 'StandaloneLayout',
      presets: [
        SwaggerEditorStandalonePreset
      ],
      url: 'http://rackerlabs.github.io/wadl2swagger/openstack/swagger/dbaas.json'
    });
  }

}

将 Swagger 编辑器添加到 Angular 项目

Adding the Swagger Editor to an Angular project

swagger

swagger-editor

angular