将 Swagger UI 添加到 Angular 应用程序

Question

有没有什么好方法可以将Swagger UI添加到 Angular 应用程序中而不会陷入太多杂草？

我想添加对托管在不同站点上的 API 的引用，因此我需要的只是用于引用文档的 UI 元素。

我找到了一个名为Swangular-Components的包，但它似乎弄乱了我的 index.d.ts 文件。我认为，对于我的情况，这样的解决方案是最简单的。

Answer 1

我已经为此苦苦挣扎了很多次，但最终找到了一些解决方案，主要是因为我偶然发现了将 swagger-editor 添加到 angular 项目的问题（/sf/answers/4020236531/）。不得不为 swagger ui 稍微调整一下，但最终让它工作。

安装 swagger-ui-dist

npm install swagger-ui-dist --save

为 swagger-ui 配置 angular.json 文件和所需的组件。

// angular.json

"styles": [
    "node_modules/swagger-ui-dist/swagger-ui.css",
    "src/styles.css"
],
"scripts": [
    "node_modules/swagger-ui-dist/swagger-ui-bundle.js",
    "node_modules/swagger-ui-dist/swagger-ui-standalone-preset.js"
]

// component.ts

import { Component, OnInit } from '@angular/core';

declare const SwaggerUIBundle: any;

@Component({
  selector: 'app-swagger-ui',
  templateUrl: './swagger-ui.component.html',
  styleUrls: ['./swagger-ui.component.css']
})
export class SwaggerUiComponent implements OnInit {

  ngOnInit(): void {
    const ui = SwaggerUIBundle({
      dom_id: '#swagger-ui',
      layout: 'BaseLayout',
      presets: [
        SwaggerUIBundle.presets.apis,
        SwaggerUIBundle.SwaggerUIStandalonePreset
      ],
      url: 'https://petstore.swagger.io/v2/swagger.json',
      docExpansion: 'none',
      operationsSorter: 'alpha'
    });
  }
}

// component.html

<div id="swagger-ui"></div>

Github repo 示例应用程序：https : //github.com/ostranme/angular-swagger-ui-example

Answer 2

现在已经有 8 个月了，所以我假设您已经弄清楚或继续前进，但可以使用 Renderer2 以基本（如果不是理想）的方式来完成此操作。您基本上会创建一个包含 swagger-ui 的配置和外部文档链接的脚本元素，然后使用 Renderer2 将标签附加到您的组件。我现在使用它作为将 swagger-ui 嵌入到 Angular 应用程序中的方法，该应用程序允许用户在不同的 api 文档之间进行选择。