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时，除了第一个tab之外，其他的不在DOM中，因此无法初始化。

您必须侦听一些制表符更改事件，然后在呈现制表符后重新初始化高级图表。

Answer 2

我知道已经很晚了，但是我确信它会帮助某人，因为花了我很多时间才在副手评论中找到它。在标签中加载高位图表的一种方法是像这样延迟加载标签的角度属性<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>

您可以阅读角度标签文档here，其中包含更基本的延迟加载示例。

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

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

highcharts未在标签中加载

2 个答案: