typescript - Kan ibland inte se Angular Material mat-tab ink bar i Angular 7?

Mycket konstigt beteende från mat-tab, allvarligt talat har jag bara gett upp med detta nu, kan inte hitta någon relevant lösning gällande detta.

         <mat-tab-group animationDuration="0ms" [selectedIndex]="activeIndex" (selectedTabChange)="onTabChange($event)" class="detail-page recent_tabs">
                <mat-tab label="Recent">
                  <div class="card_left detail-page">
                    <mat-tab-group #tabGroup [selectedIndex]="activeIndex2" (selectedTabChange)="onTabChange2($event)">
                      <mat-tab label="ALL">
                      </mat-tab>
                      <mat-tab label="T20">
                      </mat-tab>
                      <mat-tab label="ODI">
                      </mat-tab>
                      <mat-tab label="TEST">
                      </mat-tab>
                    </mat-tab-group>
                  </div>
                </mat-tab>
                <mat-tab label="Upcoming">
                  <div class="card_left detail-page">
                    <mat-tab-group #tabGroup [selectedIndex]="activeIndex2" (selectedTabChange)="onTabChange2($event)">
                      <mat-tab label="ALL">
                      </mat-tab>
                      <mat-tab label="T20">
                      </mat-tab>
                      <mat-tab label="ODI">
                      </mat-tab>
                      <mat-tab label="TEST">
                      </mat-tab>
                    </mat-tab-group>
                  </div>
                </mat-tab>
            </mat-tab-group>

Allt fungerar bra. I flikarna Nyligen och Kommande, när jag navigerar till fliken nyligen, visas som standard allt valt och på samma sätt när användaren klickar på Kommande visar jag fliken "alla"

När flikarna ändras, visas inte mat-ink bar och när jag öppnar inspektera element så visas den plötsligt och nu när jag navigerar från senaste till kommande fungerar det, sedan plötsligt ändrade jag till några andra flikar t20, test eller ODI, sedan efter att jag klickar på Senaste-fliken igen, navigerar den till alla och selectedIndex2 är 0 men mat-ink-bar visas inte och nu när jag stängde inspektera element-fliken dyker den plötsligt upp så det fungerar när jag växlar inspektera element och jag vet inte varför detta hände?

Vet inte varför detta konstiga beteende från angular-mat-tabs

Kan återskapa problemet i stackblitz också, Angular Mat Tab i Stackblitz-länk

Svar #1

Angular Material-flik tar bort komponent från DOM om fliken är osynlig. Komponenten är fortfarande aktiv men det finns ingen vy i DOM.

om du försöker ändra den valda fliken på en osynlig flik, då får materialfliken en ny aktiv flik och försöker uppdatera bläckstapeln. Bläckstapeln behöver ett DOM-element för att få nuvarande vänsterposition men det finns inget DOM vid detta tillfälle.

Lösning uppdatera bara ink-bar vid selectedTabChange

TS

export class TabsTemplateExample {

  activeIndex: number;
  activeIndex2: number;

  @ViewChildren('childTabs') childTabs: QueryList<MatTabGroup>;

  onTabChange(event: any){
    this.activeIndex = event.index;

    this.childTabs.forEach(childTab => {
       childTab.realignInkBar();
    });

  }

  onTabChange2(event: any){
    this.activeIndex2 = event.index;

  }

}

HTML

<mat-tab-group ... >

   <mat-tab-group #childTabs ... >
     ...
   </mat-tab-group>

   <mat-tab-group #childTabs ... >
    ...
   </mat-tab-group>

</mat-tab-group>

DEMO: stackblitz

Svar #2

Som en sen uppdatering, baserat på er lösning ->

Jag hade en icke-nästlad mat-tab-group som gav mig vissa problem (inkbar visades inte, bara vid zoom), det som löste det för mig var detta, kanske hjälper det någon där ute:

min.komponent.ts

@ViewChild("tabgroup", { static: true }) tabGroup: MatTabGroup;

ngAfterViewChecked(): void {
  this.tabGroup.realignInkBar();
}

min.komponent.html

<mat-tab-group #sidecartabgroup>
  <mat-tab>
    <ng-template mat-tab-label>
      <i class="material-icons icon">bookmarks</i>
      <span class="d-none d-sm-inline">Tab 1</span>
    </ng-template>

    <custom-component-one></custom-component-one>
  </mat-tab>

  <mat-tab>
    <ng-template mat-tab-label>
      <i class="material-icons icon">bookmarks</i>
      <span class="d-none d-sm-inline">Tab 2</span>
    </ng-template>

    <custom-component-two></custom-component-two>
  </mat-tab>
</mat-tab-group>