Question

有没有一种方法可以将Swagger UI添加到Angular应用中，而不会在杂草中过多？

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

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

Answer 1

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

Answer 2

我已经为此苦苦挣扎了很多次，但最终找到了某种解决方案，这主要是因为我偶然发现了在角项目（https://stackoverflow.com/a/57431950/5641007）中添加swagger-editor的问题。不得不对swagger ui进行一些调整，但最终使其正常工作。

安装swagger-ui-dist

npm install swagger-ui-dist --save

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

// 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-editor"></div>

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

将Swagger UI添加到Angular App

2 个答案: