angular - 为什么角材料选项卡重新创建组件

Question

我的角度应用程序中有一个材料设计。

        <mat-tab-group [dynamicHeight]="true">
            <mat-tab label="tab1">
                <ng-template matTabContent>
                    <div class="tab-content">
                        <div class="map-container-outer">
                            <div class="map-container">
                               <my-comp1></my-comp1>
                            </div>
                        </div>
                    </div>
                </ng-template>
            </mat-tab>
            <mat-tab label="tab2">
                <ng-template matTabContent>
                    <div class="tab-content">
                           <my-comp2></my-comp2>
                    </div>
                </ng-template>
            </mat-tab>
        </mat-tab-group>

当我再次选择 tab2 和 tab1 时，组件 ( my-comp1, my-comp2) 重新创建。

标签： angularangular-material

Answer 1

当您使用时，<ng-template matTabContent>您会以惰性方式加载选项卡内容。删除它们以使用所有选项卡的急切加载：

<mat-tab-group [dynamicHeight]="true">
    <mat-tab label="tab1">
        <div class="tab-content">
            <div class="map-container-outer">
                <div class="map-container">
                    <my-comp1></my-comp1>
                </div>
            </div>
        </div>
    </mat-tab>
    <mat-tab label="tab2">
      <div class="tab-content">
              <my-comp2></my-comp2>
      </div>
    </mat-tab>
</mat-tab-group>