0

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

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

你能帮我吗？谢谢你。

4

2 回答 2

0

我会加载信息，selectedTabChange()然后将信息加载到图表中。原因，确实角度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)
    });
}
于 2021-04-22T14:05:26.687 回答
0

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

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

如果 tab 包含多个复杂的子组件或者 tab 的内容在初始化时依赖 DOM 计算，建议延迟加载 tab 的内容。通过在具有 matTabContent 属性的 ng-template 中声明正文，可以延迟加载选项卡内容。

Angular 文档 - 选项卡 - 延迟加载

于 2021-07-21T03:37:54.087 回答