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

Question

我想在一个webapp中提供三种不同的OpenApi定义，方便用户阅读不同API的文档。
计划是有一个切换按钮组，顶部有三个按钮，下面是 swagger ui。
我的问题是，如果我单击按钮，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;
    }
  }
}

招摇-ui.component.html

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

招摇-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。它只是保持不变。如您所知，我不太擅长打字稿和 angular。所以我想这应该不会太难。但是我也说不出哪里不对。

Answer 1

问题似乎是 angular 生命周期。当我试图同时查看所有文档时，我发现仍然只有一个会被渲染。我更改了生命周期挂钩函数，我在其中创建了 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'
    });
  }

}

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

Update embedded Swagger UI on toggle button change

html

typescript

swagger-ui

angular-material

angular