如何在 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());

我曾尝试拦截可以通过 swagger 插件实现的请求和响应，但它们没有给我我想要的东西。这做到了。