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

【问题标题】：Angular mat-tab : content of only initial selected tab is loadedAngular mat-tab：仅加载初始选定选项卡的内容
【发布时间】：2021-02-22 11:20:33
【问题描述】：

我正在使用 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>

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

你能帮忙吗？谢谢。

【问题讨论】：

标签： angular angular-material mat-tab

【解决方案1】：

我会在selectedTabChange() 上加载信息，然后将信息加载到图表中。原因，确实有角度的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)
    });
}

【讨论】：

【解决方案2】：

我认为更好的解决方案是在您的组件中使用延迟加载并重构组件中 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

【讨论】：