将 Swagger 编辑器添加到 Angular 项目

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

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

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

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

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

您可以使用swagger-编辑区 https://www.npmjs.com/package/swagger-editor-dist包来实现这一点。

npm i swagger-editor-dist --save

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

"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 存储库 - Swagger 编辑器 Angular 8 https://github.com/dinohorvat/swagger-editor-angular8/blob/master/README.md