Angular中如何让div等待Google Chart加载完成后再显示

当前实现的*ngIf仅判断了数据层面的就绪状态（stat1、stat2是否赋值），只要数据就绪就会渲染容器内所有节点。但google-chart组件拿到输入参数后，还需要完成图表资源初始化、数据格式转换、画布绘制的异步流程，这段时间内配套说明div只要满足stat1 && stat3的条件就会提前渲染，和未完成加载的图表区域混杂，造成视觉混乱。

核心逻辑是单独追踪图表本身的渲染完成状态，只有确认图表绘制完毕后再展示配套说明内容，具体步骤：

• 在组件类中新增布尔状态变量，例如chartRendered = false，专门标记图表是否完成渲染
• 为google-chart组件绑定原生的ready事件，事件触发时将chartRendered置为true；同时绑定error事件，渲染出错时将状态重置为false
• 调整说明div的显示条件，在原有判断逻辑中追加chartRendered的校验，仅当数据就绪、图表渲染完成两个条件都满足时才显示文本内容
• 若存在图表动态刷新逻辑（比如切换筛选条件、更新数据源），需要在触发刷新的第一时间将对应chartRendered重置为false，避免旧的说明内容提前显示

修改后的模板代码参考：

<ng-container *ngIf="stat1 && stat2; else loading">
  <google-chart
                [title]="title"
                [type]="TYPE"
                [data]="data"
                [columns]="columnNames"
                [options]="options"
                [width]="width"
                [height]="height"
                (ready)="chartRendered = true"
                (error)="chartRendered = false">
  </google-chart>

  <div class="myDiv" *ngIf="stat1 && stat3 && chartRendered">
    my text
  </div>
</ng-container>

<ng-template #loading>
  <div class="loading">
    my loading component
  </div>
</ng-template>

多图表场景适配 #

如果页面存在多个Google Chart，不要复用同一个状态变量，给每个图表维护独立的渲染状态标记即可，逻辑和单图表完全一致。
ready是Google Chart官方暴露的标准生命周期事件，触发时机为图表完全绘制到DOM、可正常交互，完全匹配“加载完成”的判断需求。

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