Angular mat-tab ：仅加载初始选定选项卡的内容

问题描述

我正在使用 mat-tab 来显示图表。

每个图表都是用一个查询选择器创建的：

buildDiagram (stepName : string){

    let modeler = new Editor.default({
      container : document.querySelector('#diagram-'+stepName)
    });

在我的组件中，我有一个标签列表：

steps = [
    {name: 'step1'},{name: 'step3'},{name: 'step2'}
  ];

对于每个选项卡，我创建了一个图表：

ngAfterViewInit():void {

for (let step of this.steps){
  this.flowsheetEditorService.buildDiagram(step.name) 
}

在我的 html 中，我试图像这样显示每个选项卡的图表：

<mat-tab-group 'class="diagramTabsContainer">

            <mat-tab *ngFor="let step of steps" [label] = "step.name">
    
                    <div [id]="'diagram-'+step.name" style='height: 74vh;'></div>
             
            </mat-tab>

  </mat-tab-group>  

问题是只显示了初始选定选项卡的图表。

你能帮忙吗？谢谢。

解决方法

我会在 selectedTabChange() 上加载信息，然后将信息加载到图表中。原因，确实 angular mat-tab 急切加载，但是：

急切加载的选项卡将初始化子组件，但在选项卡被激活之前不会将它们注入 DOM - Angular documentation

一个例子

    <mat-tab-group (selectedTabChange)="onTabChange($event)">
      <mat-tab *ngFor="let step of steps; let i = index" [label] = "step.name">
         <div [id]="'diagram-'+step.name" style='height: 74vh;'></div>
      </mat-tab>
    </mat-tab-group>

steps = [
    {name: 'step1'},{name: 'step3'},{name: 'step2'}
  ];

 constructor() {}

 onTabChange(event: MatTabChangeEvent) {
    this.buildDiagram(this.steps[event.index])
 }

buildDiagram (stepName : string){
    let modeler = new Editor.default({
      container : document.querySelector('#diagram-'+stepName)
    });
}

,

我认为更好的解决方案是在您的组件中使用延迟加载并重构组件中 mat-tab 中的内容并在该组件中调用 ngAfterViewInit。 例如

<mat-tab label="First">
  <ng-template matTabContent>
    Content 1 - Loaded: {{getTimeLoaded(1) | date:'medium'}}
  </ng-template>
</mat-tab>

如果标签页包含多个复杂的子组件或者标签页的内容在初始化时依赖于DOM计算，建议延迟加载标签页的内容。标签内容可以通过在带有 matTabContent 属性的 ng-template 中声明主体来延迟加载。

Angular Documentation - Tabs - lazyloading