Angular material 隐藏容器中的 mat 选项卡组不显示溢出按钮，除非单击选定的选项卡

Question

如link, in angular material tabs the ink bar does not show selection in header properly, which can be resolved with a workaround by using a view child as shown in the example at Stackblitz所述。

但是，如果如上例所示出现溢出，则下一个和上一个按钮只会在选择特定选项卡时出现。

请问如何处理，参考上面的例子

图 1：未单击活动选项卡

图 2：单击活动选项卡

Answer 1

我发现使我的墨栏更新和分页正确发生的解决方法是添加一种方法来手动更新 header 我的隐藏容器的调整大小、打开和关闭事件

function updateTabHeader() {
 this.matTabGroupReference._tabHeader.updatePagination();
 this.matTabGroupReference.realignInkbar();
}

matTabGroupReference 是对 mat-tabs-group 组件的引用

Angular material 隐藏容器中的 mat 选项卡组不显示溢出按钮，除非单击选定的选项卡

Angular material mat tab group in hidden container does not show overflow buttons unless selected tab is clicked

tabs

angular-material

angular