मेरे कोणीय अनुप्रयोग में एक सामग्री डिज़ाइन है।

        <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) फिर से बनते हैं।

-1
barteloma 2 सितंबर 2021, 23:03

2 जवाब

सबसे बढ़िया उत्तर

जब आप <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>
0
S Overfow 3 सितंबर 2021, 19:39

आप कोणीय सामग्री टैब की आलसी-लोडिंग सुविधाओं का उपयोग कर रहे हैं।

दस्तावेज़ीकरण: https://material.angular.io/components/tabs/overview# आलसी लोड हो रहा है

निकालें matTabContent उत्सुक लोडिंग पर वापस आ जाएगा और समस्या से बच जाएगा।

0
Gaël J 3 सितंबर 2021, 10:02