reactjs - 使用 Angular 10 添加 swagger-UI

Question

如何添加 Swagger 用户界面 在您的 Angular 应用程序中？
我已经多次搜索这个问题，发现只有一个解决方案，它是使用 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/

Answer 1

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

安装 swagger-uinpm 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
        });