将 Swagger 编辑器添加到 Angular 项目 [英] Adding the Swagger Editor to an Angular project

问题描述

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

I want to insert the Swagger UI and Swagger Editor into my Angular project. So that it will look like this: http://editor.swagger.io/?docExpansion=none

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

Thanks to the following instructions I was already able to add the Swagger UI to my Angular project: https://github.com/agoncal/swagger-ui-angular6

仍然缺少的是 Swagger 编辑器，用户可以在其中编辑 OpenAPI 规范(参见第一个链接的左侧).

What is still missing is the Swagger Editor where the user can edit the OpenAPI Specification (see left side of the first link).

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

The target state of my application should be that the OpenAPI Specification is loaded and the user then has a visual overview of the API and should also be able to edit this API via the Swagger editor (missing part). So pretty much the functionality of the first link.

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

So my question is, how can I implement the Swagger Editor to my Angular project? I didn't find any information about it on the internet.

推荐答案

你可以使用 swagger-editor-dist 包来实现这一点.

You can use swagger-editor-dist package to achieve this.

npm i swagger-editor-dist --save

安装依赖后，您必须包含所需的脚本和 css 文件.您可以在 angular.json 文件中执行此操作

After you install the dependency, you have to include the required scripts and css file. You can do that in 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.选择您的任何组件并添加

Next step is to prepare the html where you want to put the editor. Pick any of your components and add

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

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

Final step is to instantiate the editor to that div. In the same component, add this

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'
  });
}

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

I also created an example app for this.

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

这篇关于将 Swagger 编辑器添加到 Angular 项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！