选项卡索引更改时，mat-tab-group滚动到页面顶部

Question

我在Angular Material的mat-tab-group上有奇怪的行为。

当我更改标签索引时，它会将页面滚动到顶部。

知道为什么吗？

Answer 1

角度素材库中的已知错误（请参阅here）尚未修复。

目前的解决方法是将min-height应用于mat-tab-group的父元素

Answer 2

预定义的最小高度不适用于动态高度（内容大小发生变化的标签），因此响应最快的解决方案是在更改标签时修改它，使新标签保持前一个的最小高度避免向上滚动

---

//HTML

<mat-tab-group #matTabGroup (selectedTabChange)="onMatTabChanged();">

---

//TS

@ViewChild('matTabGroup', { static: true }) matTabGroup: MatTabGroup;

onMatTabChanged() {
  this.setMatTabGroup();
}

setMatTabGroup() {
  let ntvEl = this.matTabGroup._elementRef.nativeElement;
  ntvEl.style.minHeight = ntvEl.clientHeight + 'px';
}

Answer 3

您可以通过在mat-tab-group中添加最小高度来避免这种情况。

示例：

<mat-tab-group style='min-height:300px'>