在切换按钮更改时更新嵌入式 Swagger UI答案

【问题标题】：Update embedded Swagger UI on toggle button change在切换按钮更改时更新嵌入式 Swagger UI
【发布时间】：2022-01-25 17:59:28
【问题描述】：

我想在一个 webapp 中提供三种不同的 OpenApi 定义，以便用户可以阅读不同 API 的文档。
计划是有一个切换按钮组，顶部有三个按钮，下面是 swagger ui。
我的问题是，如果我点击一个按钮，招摇的用户界面不会更新。我的方法是这样的：

api-docs.component.html

<mat-card>
    <mat-button-toggle-group style="width: auto; display: flex;" (change)="toggleApiDoc($event)">
        <mat-button-toggle checked value="mainPlattform" style="width: 100%">Main Plattform</mat-button-toggle>
        <mat-button-toggle value="adapterHttp" style="width: 100%">Adapter HTTP</mat-button-toggle>
        <mat-button-toggle value="adapterMqtt" style="width: 100%">Adapter MQTT</mat-button-toggle>
    </mat-button-toggle-group>
    <app-swagger-ui [url]=activeApiDoc></app-swagger-ui>
</mat-card>

api-docs.component.ts

import { Component } from '@angular/core';
import { MatButtonToggleChange } from '@angular/material/button-toggle';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-api-docs',
  templateUrl: './api-docs.component.html',
  styleUrls: ['./api-docs.component.scss']
})
export class ApiDocsComponent {

  readonly mainApiDoc = environment.main_api_doc;
  readonly httpAdapterApiDoc = environment.http_adapter_doc;
  readonly mqttAdapterApiDoc = environment.http_adapter_doc;

  activeApiDoc = this.mainApiDoc;

  constructor() {
  }

  toggleApiDoc(event: MatButtonToggleChange) {
    switch (event.value) {
      case 'mainPlattform':
        this.activeApiDoc = this.mainApiDoc;
        break;
      case 'adapterHttp':
        this.activeApiDoc = this.httpAdapterApiDoc;
        break;
      case 'adapterMqtt':
        this.activeApiDoc = this.mqttAdapterApiDoc;
        break;
      default:
        this.activeApiDoc = this.mainApiDoc;
        break;
    }
  }
}

swagger-ui.component.html

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

swagger-ui.component.ts

import { Component, Input, OnInit } from '@angular/core';
import SwaggerUI from 'swagger-ui';

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

  @Input() url: string = "";
  constructor() { }

  ngOnInit(): void {
    const ui = SwaggerUI({
      url: this.url,
      dom_id: '#swagger'
  });
  }

}

environment.ts

export const environment = {
  main_api_doc: 'https://petstore.swagger.io/v2/swagger.json',
  http_adapter_doc: 'https://raw.githubusercontent.com/hjacobs/connexion-example/master/swagger.yaml'
};

如您所见，我使用随机 yaml 文件进行测试。第一个被渲染。我的 web 应用程序中嵌入了一个完整的 Swagger UI，但是当我单击不同的切换按钮时，它不会呈现另一个 Swagger UI。它只是保持不变。如您所知，我对打字稿和角度不太擅长。所以我想应该不会太难。但我不知道这里出了什么问题。

【问题讨论】：

Swagger UI 具有 urls 配置选项来呈现多个定义并在它们之间切换。您是否有特定原因要实施自己的机制？
感谢 Helen 提供的信息。我不知道。无论如何，我认为在该解决方案中使用了 swagger-ui-dist 包。我没有让它工作。我目前正在使用 swagger-ui。我尝试以相同的方式定义参数，但随后显示“未提供 API 定义”。我还想稍后将第三个 API 定义更改为 AsyncApi 定义。我只是还没有研究如何渲染这些。
W/r/t AsyncAPI：Swagger UI 不支持 AsyncAPI。您可以将以下渲染器之一用于 AsyncAPI：asyncapi.com/docs/community/tooling#documentation-generators
是的，我知道。我想先测试一下swagger的东西，因为我对它很熟悉，以后再添加一个AsyncApi组件。谢谢你的链接。

标签： html angular typescript angular-material swagger-ui

【解决方案1】：

问题似乎是角度生命周期。当我尝试同时查看所有文档时，我发现仍然只有一个会被渲染。我更改了生命周期钩子函数，我在其中创建了 Swagger UI，现在它可以工作了。

import { Component, Input, OnChanges } from '@angular/core';
import SwaggerUI from 'swagger-ui';

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

  @Input() url: string = "";

  constructor() { }

  ngOnChanges() {
    const ui = SwaggerUI({
      url: this.url,
      dom_id: '#swagger'
    });
  }

}

【讨论】：