当标签索引更改时，Mat-Tab-Group滚动到页面顶部

Question

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

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

知道为什么吗？

Answer 1

这是角度材料库（请参阅此处）中的一个已知错误，尚未修复。

当前的解决方法是将 amin-height应用于mat-tab-group

Answer 2

您可以通过向 mat-tab-group 添加 min-height 来避免这种情况。

示例：

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

Answer 3

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

//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';
}