Angular mat-tab：僅加載初始選定選項卡的內容

Question

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

問題是只顯示初始選定選項卡的圖表。

你能幫我嗎？ 謝謝你。

Answer 1

我將在selectedTabChange()上加載信息，然后將信息加載到圖表中。 原因，確實 angular mat-tab被急切地加載，但是：

急切加載的選項卡將初始化子組件，但在激活選項卡之前不會將它們注入 DOM - Angular 文檔

一個例子

    <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)
    });
}

Answer 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 文檔 - 選項卡 - 延遲加載