0

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

这是我的问题的图片：

在此处输入图像描述

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

（这里我点击了子标签组，子标签组 - 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>

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

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

4

2 回答 2

2

您需要用一个封装垫选项卡组

<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>
于 2020-07-05T02:56:37.660 回答
0

具有 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 导致内部元素在活动时重新渲染。

于 2020-09-24T13:24:08.190 回答