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

问题描述

我想将Swagger UI和Swagger编辑器插入到我的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编辑器Angular 8

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