Angular中如何在带*ngIf的元素内使用模板引用变量渲染Swagger UI？

问题原因 #

*ngIf是结构性指令，只有当绑定的条件为true时，才会将内部元素添加到DOM中。你当前的代码不管是设置static: true还是在ngAfterContentInit中执行初始化，都赶不上元素实际创建的时机——ngAfterContentInit触发时，*ngIf控制的元素可能还未生成，导致Swagger UI找不到挂载的DOM节点。

解决方案 #

调整ViewChild配置并监听*ngIf条件的变化，确保在DOM元素存在后再初始化Swagger UI：

修改后的TypeScript代码

import { Component, ElementRef, ViewChild, OnChanges, SimpleChanges, ChangeDetectorRef } from '@angular/core';
import SwaggerUI from 'swagger-ui';

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponent implements OnChanges, AfterViewInit {
  @ViewChild('customerapidocumentation', { static: false })
  custApiDocElement: ElementRef | undefined;
  docu: boolean = false; // 控制*ngIf的条件变量
  api: any; // 你的JSON格式API文档

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnChanges(changes: SimpleChanges): void {
    // 当docu变为true时触发Swagger UI初始化
    if (changes['docu'] && changes['docu'].currentValue) {
      // 强制Angular检测DOM变化，确保元素已渲染
      this.cdr.detectChanges();
      this.initSwaggerUI();
    }
  }

  ngAfterViewInit(): void {
    // 如果初始时docu就是true，直接初始化
    if (this.docu) {
      this.initSwaggerUI();
    }
  }

  private initSwaggerUI(): void {
    // 确保DOM节点和API文档都存在
    if (this.custApiDocElement?.nativeElement && this.api) {
      // 清理已存在的Swagger UI实例，避免重复渲染
      const existingSwaggerUI = (this.custApiDocElement.nativeElement as HTMLElement).querySelector('.swagger-ui');
      if (existingSwaggerUI) {
        existingSwaggerUI.remove();
      }
      // 初始化Swagger UI
      SwaggerUI({
        spec: this.api,
        domNode: this.custApiDocElement.nativeElement
      });
    }
  }
}

模板代码保持不变

<div *ngIf="docu">
  <div #customerapidocumentation id="customer-api-documentation"></div>
</div>

关键说明 #

• static: false：设置为false后，ViewChild会在DOM动态更新后才获取元素引用，适配*ngIf的动态创建逻辑。
• ngOnChanges监听条件变化：当docu从false切换为true时，触发初始化逻辑，确保DOM元素已存在。
• ChangeDetectorRef.detectChanges()：强制Angular立即更新DOM，避免因变更检测周期延迟导致元素未就绪。
• 重复实例清理：防止多次切换docu状态时，创建多个Swagger UI实例造成冲突。

内容的提问来源于stack exchange，提问作者Entire-Commercial860