Highcharts 未在选项卡中加载

Question

我有多个选项卡视图，每个选项卡视图中都有一个组件呈现。这是代码：

<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>

看起来像这样app-summary：

<div fxLayout="column" fxLayoutGap="20px" style="padding: 20px; width: 1100px;">
  <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start start">
    <div fxFlex="55">
      <mat-card class="summary-card">
        <mat-card-content>
          <chart [options]="wealthOptions"></chart>
        </mat-card-content>
      </mat-card>
    </div>
    <div fxFlex="25">
      <mat-card class="summary-card">
        <mat-card-content>
          <chart [options]="pieProbOptions"></chart>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>

包含<chart>高图表视图。但是，这些图表仅适用于第一个选项卡。component为每个选项卡加载并呈现。

这里是否缺少某些内容或需要以某种方式完成？

Answer 1

我知道已经晚了，但我相信这会对某人有所帮助，因为我花了很长时间才在随意的评论中找到这一点。在选项卡中加载 highcharts 的一种方法是使用 Angular 属性延迟加载选项卡，<ng-template matTabContent>如下所示

<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>

您可以在此处阅读角度选项卡文档，其中包含延迟加载的更基本示例。

你不需要我拥有的父/子组件结构，并且可能会做这样的事情

<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>