如何在Angular中基于Open API动态生成JSON规范并切换Swagger展示？

核心思路 #

要实现选中不同API就切换对应Swagger页面，关键是切换时销毁旧的Swagger实例，再基于新的JSON路径重新初始化Swagger UI。

具体实现步骤 #

1. 保存Swagger实例引用
   先在组件类里定义变量存Swagger实例，方便后续销毁：

export class AppComponent {
  private swaggerInstance: any;
  // 自定义API列表，每个项对应名称和JSON文件路径
  apiList = [
    { name: '宠物API', url: 'assets/pet.json' },
    { name: '订单API', url: 'assets/order.json' },
    { name: '用户API', url: 'assets/user.json' }
  ];
  currentApiUrl = 'assets/pet.json';

  ngOnInit() {
    this.initSwagger(this.currentApiUrl);
  }

  // 封装Swagger初始化方法
  private initSwagger(url: string) {
    // 销毁旧实例，避免重复渲染
    if (this.swaggerInstance) {
      this.swaggerInstance.destroy();
    }
    // 清空容器内容
    const domNode = document.getElementById('swagger-ui-item');
    if (domNode) domNode.innerHTML = '';
    // 初始化新实例
    this.swaggerInstance = SwaggerUI({
      domNode: document.getElementById('swagger-ui-item'),
      url: url
    });
  }
}

2. 添加API切换交互
   在组件模板里加下拉框或按钮组，绑定切换事件：

<!-- 下拉框示例 -->
<select (change)="onApiChange($event)">
  <option *ngFor="let api of apiList" [value]="api.url">{{api.name}}</option>
</select>

<!-- Swagger渲染容器 -->
<div id="swagger-ui-item"></div>

3. 实现切换事件处理
   在组件类里添加切换方法，触发新Swagger实例初始化：

onApiChange(event: Event) {
  const selectedUrl = (event.target as HTMLSelectElement).value;
  this.initSwagger(selectedUrl);
}

注意事项 #

• 确保各API的JSON文件路径正确（比如放在assets目录下）
• 如果是后端动态生成JSON，把url换成后端接口地址即可
• 必须销毁旧实例，否则会出现多个Swagger UI叠加的问题

内容的提问来源于stack exchange，提问作者Soheila