将Swagger编辑器添加到Angular项目中

Question

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

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

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

我的应用程序的目标状态应该是：已加载OpenAPI规范，然后用户对API有了直观的了解，并且还应该能够通过Swagger编辑器（缺少部分）来编辑此API。因此，第一个链接的功能差不多。

所以我的问题是，如何在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编辑器Angular 8