如何在 Angular 9 中外部为 SwaggerUI 创建自定义布局和插件

Question

我正在从Angular UI项目外部自定义Swagger端点。我正在使用SwaggerUIBundle。

我正在互联网上探索很多东西，但不知道如何创建我们自己的自定义布局和插件。 在 swagger 官方网站上获得的有用文档非常少，它无助于我在我的 angular 项目中创建这些东西。

const ui = SwaggerUIBundle({
url: "https://petstore.swagger.io/v2/swagger.json",
dom_id: '#swagger-ui',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIBundle.SwaggerUIStandalonePreset
],
Plugins: [
SwaggerUIBundle.plugins.DownloadUrl,
]
layout: "StandaloneLayout"

}(

你们能否在这里帮助我一些关于如何在我的 angular 9 代码中创建我自己的自定义组件、布局和插件的示例。

谢谢。

Answer 1

在你的swagger插件组件中(或者通过使用window.swagger = swaggerUIBundle(，你应该引用swagger json(即system指的是你的swaggerUIBundle变量(：

let mySwaggerJson = system.getSystem().spec().toJSON()

这为我们提供了该文档中的加载状态的线索。这也不会给你你想要的东西，除非你在文档加载后调用它。

因此，我们可以做的就是等待我们 swagger json 上的所需状态(即它已加载的状态(：

waitUntil = (condition: any, checkInterval = 100) => {
return new Promise((resolve) => {
let interval = setInterval(() => {
if (!condition()) {
return;
}
clearInterval(interval);
resolve(null);
}, checkInterval);
});
};
await waitUntil(() => system.specSelectors.loadingStatus() === 'success');
//This outputs the swagger as you would expect.
console.log(system.getSystem().spec().toJSON());

我曾试图拦截可以通过大摇大摆的插件完成的请求和响应，但他们没有给我我想要的东西。这确实做到了。