添加 swagger-UI 和 angular 10

Adding swagger-UI with angular 10

如何在您的 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/

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

步数 -

  1. 安装swagger-ui

    npm i swagger-ui

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

  "styles": [ "./node_modules/swagger-ui/dist/swagger-ui.css"]
  1. 将 swagger-UI 的导入语句添加到您的 component.ts 文件中。

    import SwaggerUI from 'swagger-ui';

  2. 在组件的 ngOnInit 中添加以下代码。

// example-swagger-exp.component.ts
ngOnInit() {
     SwaggerUI({
         domNode: document.getElementById('swagger-ui-item'),
         url: 'https://petstore.swagger.io/v2/swagger.json'
       });
 }
  1. 此功能的最后一部分, 将以下代码添加到组件的 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
        });