有时无法在 Angular 7 中查看 Angular Material mat-tab 墨栏？

Question

mat-tab 的行为非常奇怪，说真的，我现在刚刚放弃了这个，找不到任何相关的解决方案。

         <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>

一切都运转良好。在“最近”和“即将到来”的选项卡中，当我导航到“最近”选项卡时，我默认显示所有选择，类似地，当用户单击即将到来的选项卡时，我会显示“所有”选项卡

当选项卡更改时，mat-ink 栏不显示，当我打开检查元素时，它突然显示，现在我从最近导航到即将到来的它工作，然后突然我更改为其他一些选项卡 t20、test 或 ODI，然后再次单击“最近的选项卡”后，它导航到所有选项卡，selectedIndex2 为 0，但 mat-ink-bar 未显示，现在我关闭了检查元素选项卡，它突然出现，因此当我切换检查元素时它可以工作，并且我不显示不知道为什么会这样？

不知道为什么会有这种奇怪的行为angular-mat-tabs

也能够在 stackblitz 中复制该问题，Stackblitz 中的 Angular Mat Tab 链接

Answer 1

如果选项卡不可见，则角度材质选项卡会从 DOM 中删除组件。组件仍然存在，但 DOM 中没有视图。

如果您尝试更改不可见选项卡上的选定选项卡，则材质选项卡将获取新的活动选项卡并尝试更新墨水栏。ink-bar 需要 DOM 元素来获取当前左侧位置，但此时没有 DOM。

解决方案 只需更新 selectedTabChange 上的 ink-bar

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;

  }

}

超文本标记语言

<mat-tab-group ... >

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

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

</mat-tab-group>

演示：stackblitz