1

マットタブからの非常に奇妙な動作、真剣に私は今これをあきらめました、これに関する関連する解決策が見つかりません.

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

すべてがうまく機能します。最近のタブと今後のタブで、最近のタブに移動すると、デフォルトですべての選択が表示され、同様にユーザーが今後のタブをクリックすると、「すべて」タブが表示されます

タブが変更されているときにマットインクバーが表示されず、検査要素を開くと突然表示され、最近から次のタブに移動してから、突然他のタブ t20、テスト、または ODI に変更してから、もう一度最近のタブをクリックすると、すべてに移動し、selectedIndex2 は 0 ですが、mat-ink-bar が表示されず、要素の検査タブを突然閉じたので、要素の検査を切り替えても動作しません。なぜこれが起こったのかわからない？

からのこの奇妙な動作の理由がわからないangular-mat-tabs

stackblitz でも問題を再現できます。Angular Mat Tab in Stackblitz リンク

4

3 に答える 3

5

タブが非表示の場合、Angular Material タブは DOM からコンポーネントを削除します。コンポーネントはまだ生きていますが、DOM にビューがありません。

非表示のタブで選択したタブを変更しようとすると、マテリアル タブが新しい​​アクティブなタブを取得し、インク バーを更新しようとします。インクバーは、現在の左位置を取得するために 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>

デモ:スタックブリッツ

于 2019-12-19T13:40:06.893 に答える