Angular material 当标签组在其他标签组中时，标签组没有墨水栏

Question

我的网站上有多个标签，主标签组没有任何问题。但是，当我在选项卡上放置另一个选项卡组时，仅当单击其中一个选项卡时才会显示墨迹栏。

这是我的问题的图片：

当我点击一个选项卡时，如果它已经显示，墨栏将从屏幕外部进行过渡动画并将其自身正确放置在应有的位置：

（这里我点击了子标签组，子标签组- Jeu vidéo - 没有反应）

选项卡功能齐全（单击它们时它们会正常反应）但我无法在不单击的情况下显示墨迹选项卡。

我该怎么做才能让选项卡在没有用户输入的情况下正确显示其墨迹选项卡？

代码如下（目前没有javascript但我可以添加一些）：

<mat-tab-group mat-align-tabs="center">
  <mat-tab label="Presentation">
    <app-presentation>
    </app-presentation>
  </mat-tab>
  <mat-tab label="Experience">
    <app-experience>
    </app-experience>
  </mat-tab>
  <mat-tab label="Education">
    <app-education>
    </app-education>
  </mat-tab>
  <mat-tab label="Projets">
    <div class="buffer"></div>
    <div class="buffer"></div>
    <div class="container">
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8">
          <p>text here</p>
          <div class="spacer"></div>
          <div class="separator"></div>
        </div>
        <div class="col-sm-2"></div>
      </div>
    </div>
    <mat-tab-group mat-align-tabs="center">
      <!-- jeux vidéos -->
      <mat-tab label="Jeu vidéo">
        <mat-tab-group mat-align-tabs="center">
          <mat-tab label="Tower Defense mobile">
            <app-project-tower-defense></app-project-tower-defense>
          </mat-tab>
          <mat-tab label="Voronoï Procedural terrain generation">
            <app-project-voronoi></app-project-voronoi>
          </mat-tab>
          <mat-tab label="Supremacy">
            <app-project-supremacy></app-project-supremacy>
          </mat-tab>
        </mat-tab-group>
      </mat-tab>
      <!-- imprimantes 3D -->
      <mat-tab label="DIY">
        <mat-tab-group mat-align-tabs="center">
          <mat-tab label="Auto Cat Feeder">
            <app-project-cat-feeder></app-project-cat-feeder>
          </mat-tab>
          <mat-tab label="Retro gameboy">
            <app-project-retro-gameboy></app-project-retro-gameboy>
          </mat-tab>
          <mat-tab label="Mega LED">
            <app-project-mega-led></app-project-mega-led>
          </mat-tab>
        </mat-tab-group>
      </mat-tab>
      <!-- web scrapping -->
      <mat-tab label="Web Scrapping">
        <mat-tab-group mat-align-tabs="center">
          <mat-tab label="MangaScrap">
            <app-project-mangascrap></app-project-mangascrap>
          </mat-tab>
          <mat-tab label="MangaScrap2">
            <app-project-mangascrap2></app-project-mangascrap2>
          </mat-tab>
        </mat-tab-group>
      </mat-tab>
      <!-- misc -->
      <mat-tab label="Photoshop">
        <mat-tab-group mat-align-tabs="center">
          <mat-tab label="Pub bière">
            <app-project-beer-add></app-project-beer-add>
          </mat-tab>
        </mat-tab-group>
      </mat-tab>
    </mat-tab-group>
  </mat-tab>
</mat-tab-group>

注意：添加 [selectedIndex]="0" 不会改变任何东西

编辑：我注意到在子垫选项卡组可见时调整屏幕大小也有效

Answer 1

您需要使用

封装 mat 选项卡组

<ng-template matTabContent>...your tab groups...</ ng-template>

见下文：

<h3>Nested Tab Groups</h3>
    
      <mat-tab-group mat-align-tabs="center">
        <mat-tab label="Presentation"></mat-tab>
        <mat-tab label="Experience"></mat-tab>
        <mat-tab label="Education"></mat-tab>
        <mat-tab label="Projets">
          <div class="buffer"></div>
          <div class="buffer"></div>
          <div class="container">
            <div class="row">
              <div class="col-sm-2"></div>
              <div class="col-sm-8">
                <p>text here</p>
                <div class="spacer"></div>
                <div class="separator"></div>
              </div>
              <div class="col-sm-2"></div>
            </div>
          </div>
          <ng-template matTabContent> <!-- Note the ng-template -->
            <mat-tab-group mat-align-tabs="center">
              <!-- jeux vidéos -->
              
              <mat-tab label="Jeu vidéo">
                <ng-template matTabContent>
                  <mat-tab-group mat-align-tabs="center" >
                    <mat-tab label="Tower Defense mobile"></mat-tab>
                    <mat-tab label="Voronoï Procedural terrain generation"></mat-tab>
                    <mat-tab label="Supremacy"></mat-tab>
                  </mat-tab-group>          
                </ng-template>
              </mat-tab>
              <!-- imprimantes 3D -->
              <mat-tab label="DIY">
                <ng-template matTabContent>
                  <mat-tab-group mat-align-tabs="center">
                    <mat-tab label="Auto Cat Feeder"></mat-tab>
                    <mat-tab label="Retro gameboy"></mat-tab>
                    <mat-tab label="Mega LED"></mat-tab>
                  </mat-tab-group>          
                </ng-template>
              </mat-tab>
              <!-- web scrapping -->
              <mat-tab label="Web Scrapping">
                <ng-template matTabContent> 
                  <mat-tab-group mat-align-tabs="center">
                    <mat-tab label="MangaScrap"></mat-tab>
                    <mat-tab label="MangaScrap2"></mat-tab>
                  </mat-tab-group>
                </ng-template>
              </mat-tab>
              <!-- misc -->
              <mat-tab label="Photoshop">
                <ng-template matTabContent>
                  <mat-tab-group mat-align-tabs="center">
                    <mat-tab label="Pub bière"></mat-tab>
                  </mat-tab-group>
                </ng-template>
              </mat-tab>
            </mat-tab-group>
          </ng-template>
        </mat-tab>
      </mat-tab-group>

Answer 2

具有 dynamicHeights 的嵌套 mat-tab-groups 的 Inkbar 使用 *ngFor 解决此问题：

<mat-tab-group [dynamicHeight]="true">
    <mat-tab #tab>
            <mat-tab-group *ngFor="let workaround of [tab.isActive]" [dynamicHeight]="true">
            ...

*ngFor 导致内部元素在活动时为 re-render。

Angular material 当标签组在其他标签组中时，标签组没有墨水栏

Angular material tag group has no inkbar when the tab group is in an other tab group

html

angular-material

angular

mat-tab