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

一切正常。在最近和即将到来的标签中，当我导航到最近的标签时，我默认显示所有 select 并且类似地当用户点击即将到来时我显示 "all" 标签

当标签更改时，然后不显示Mat-Ink栏，当我打开检查元素时，它突然显示出来，现在我从最近到即将到来的工作起作用，然后突然我更改为其他一些Tabs T20，测试或 ODI，然后我再次单击“最近”选项卡，它导航到所有并且 selectedIndex2 为 0 但 mat-ink-bar 没有显示，现在我关闭了检查元素选项卡突然出现了当我切换检查元素时有效但我不知道为什么会这样？

不知道为什么 angular-mat-tabs

会出现这种奇怪的行为

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

Answer 1

如果选项卡不可见，

angular material 选项卡从 DOM 中删除组件。组件仍然存在，但 DOM.

中没有视图

如果您尝试更改不可见选项卡上的选定选项卡，则 material 选项卡会获取新的活动选项卡并尝试更新墨栏。 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

Answer 2

如 Miladfm 所述，在单击父选项卡之前，内部选项卡不会显示在屏幕上，因此最初无法正确设置内部选项卡墨栏。我通过使用 <ng-template matTabContent> 延迟加载包含内部选项卡的选项卡来解决。它仅在导航到父选项卡后加载那些内部选项卡，因此它正确设置了墨栏。

之前

<mat-tab-group>
    <mat-tab label="Item Usage">
       <mat-tab-group>
          ...
       </mat-tab-group>
    </mat-tab>
</mat-tab-group>

之后

<mat-tab-group>
    <mat-tab label="Item Usage">
       <ng-template matTabContent>
          <mat-tab-group>
             ...
          </mat-tab-group>
       </ng-template>
    </mat-tab>
</mat-tab-group>

Answer 3

作为后期更新，基于你们的解决方案->

我有一个非嵌套的 mat-tab-group 给我带来了一些问题（墨栏没有出现，只有在缩放时），为我解决的是这个，也许它可以帮助那里的人：

my.component.ts

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

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

my.component.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>

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

Unable to view Angular Material mat-tab ink bar sometimes in Angular 7?

typescript

angular-material

angular

mat-tab