时间戳

首页 > 解决方案 > 有时无法在 Angular 7 中查看 Angular Material mat-tab 墨水条？

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

问题描述

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

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

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

标签： angulartypescriptangular-materialmat-tab

解决方案

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

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

解决方案 只需更新 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>

演示：stackblitz

推荐阅读