Javascript highcharts未加载到选项卡中

我有多个选项卡视图，每个选项卡中都有一个组件渲染。以下是代码：

<mat-tab-group>
                    <mat-tab *ngFor="let g of goals; index as i">
                        <ng-template mat-tab-label>{{g.name}}</ng-template>
                        <div class="row">
                            <app-summary [goal]="g"></app-summary>
                        </div>
                        <div class="row">
                            <mat-table #table [dataSource]="dataSource[i]">
                                ## some table content here
                            </mat-table>
                        </div>
                    </mat-tab>
                </mat-tab-group>

包含高级图表视图。但是，图表仅适用于第一个选项卡。为每个选项卡加载并呈现

组件

此处是否缺少某些内容或需要以某种方式进行操作？
这是因为，当您初始化highcharts时，除了第一个选项卡外，其他选项卡不在DOM中，因此无法进行初始化

您将必须侦听一些选项卡更改事件，然后在呈现选项卡后重新初始化高图。
我知道已经很晚了，但我相信这会对某些人有所帮助，因为我花了很长时间才在一条随意的评论中找到这一点。在选项卡中加载highcharts的一种方法是延迟加载带有角度属性的选项卡，如下所示

<mat-tab-group class="secondary-tab-group has-header"
               [dynamicHeight]="true"
               mat-stretch-tabs>
  <mat-tab label="first">
    <child-component></child-component>
  </mat-tab>

  <mat-tab label="second">
    <ng-template matTabContent>
      <highcharts-child-component [list]="dataList"></highcharts-child-component>
    </ng-template>
  </mat-tab>

</mat-tab-group>



您可以通过一个更基本的延迟加载示例来阅读angular tabs文档

您不需要我拥有的父/子组件结构，并且可能会执行类似的操作

<mat-tab-group class="secondary-tab-group has-header"
               [dynamicHeight]="true"
               mat-stretch-tabs>
  <mat-tab label="first">
    hello world
  </mat-tab>

  <mat-tab label="second">
    <ng-template matTabContent>
      <div>
        <chart (load)="saveInstance($event.context)" [optoins]="highchartOptions"></chart>
      </div>
    </ng-template>
  </mat-tab>

</mat-tab-group>


你好，世界

<mat-tab-group class="secondary-tab-group has-header"
               [dynamicHeight]="true"
               mat-stretch-tabs>
  <mat-tab label="first">
    hello world
  </mat-tab>

  <mat-tab label="second">
    <ng-template matTabContent>
      <div>
        <chart (load)="saveInstance($event.context)" [optoins]="highchartOptions"></chart>
      </div>
    </ng-template>
  </mat-tab>

</mat-tab-group>