1

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

4

3 回答 3

5

如果选项卡不可见，角度材质选项卡会从 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

于 2019-12-19T13:40:06.893 回答
1

正如 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>
于 2020-05-18T02:57:31.987 回答
0

作为一个较晚的更新，基于你们的解决方案->

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

我的.component.ts

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

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

我的.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>
于 2021-05-18T13:10:54.113 回答