添加带有 angular 10 的 swagger-UI

如何解决添加带有 angular 10 的 swagger-UI

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

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

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

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

解决方法

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

步骤 -

安装 swagger-ui

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

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

将 swagger-UI 的 import 语句添加到您的 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 文件中

// swagger-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
        });