添加 swagger-UI 和 angular 10

Question

如何在您的 angular 应用程序中添加 Swagger UI？

我已经多次搜索这个问题，发现只有一个解决方案，它是使用 swagger-ui-dist 包完成的，但在 https://www.npmjs.com/package/swagger-ui 的最新版本中告诉我使用 swagger-ui 而不是单页应用程序的 swagger-ui-dist。

有添加这个包来react的解决方案，解释的很好。

Swagger-UI 与 React - https://swagger.io/blog/api-documentation/building-documentation-portal-swagger-tutorial/

Answer 1

我在我的 angular 应用程序中实现了此功能，并认为它对其他开发人员也有帮助。我在多个地方搜索过它并阅读了多个博客。

步数 -

安装swagger-ui

npm i swagger-ui
配置 angular.json 文件和 swagger-ui CSS 模块。

  "styles": [ "./node_modules/swagger-ui/dist/swagger-ui.css"]

将 swagger-UI 的导入语句添加到您的 component.ts 文件中。

import SwaggerUI from 'swagger-ui';
在组件的 ngOnInit 中添加以下代码。

// example-swagger-exp.component.ts
ngOnInit() {
     SwaggerUI({
         domNode: document.getElementById('swagger-ui-item'),
         url: 'https://petstore.swagger.io/v2/swagger.json'
       });
 }

此功能的最后一部分，将以下代码添加到组件的 HTML 文件中

//招摇-exp.component.html
```
<div id="swagger-ui-item"></div>
```

注意 - 最后一件重要的事情，

如何在步骤 4 中添加 swagger.json/swagger.yaml 对象？

只需将 'url' 参数替换为 'spec' 并添加您的 JSON 对象。

      SwaggerUI({
          domNode: document.getElementById('api-data'),
          spec : your json object
        });

添加 swagger-UI 和 angular 10

Adding swagger-UI with angular 10

swagger

single-page-application

reactjs

swagger-ui

angular