问题标签 [angular-material-tab]

我的页面上有一个 Angular Material 选项卡组。我必须使用赛普拉斯测试标签的更改。当页面加载时，用户位于“基本信息”选项卡上，我想切换到“关系”选项卡。我无法更改标签

这是代码：

我正在使用标签上的单击事件来更改选项卡，但无济于事。

我收到以下错误：

我在分割区域的左侧有材料选项卡。

当我移动拆分器以减小选项卡组的宽度时，活动链接标记保持不变并且不响应更新的宽度。

如何制作响应式标签？我在stackbliz上创建

我有一个应用程序，它使用 Angular Material 选项卡在两个选项卡中具有两个 ag-grids。当用户在选项卡之间切换时，其中一列中的项目将呈现在网格之外（但在选项卡主体内）。该列的不同之处在于它使用了自定义单元格渲染器。它只影响第一个选项卡中的网格，因为那是使用单元格渲染器的网格。所以你必须切换到第二个标签然后回到第一个标签才能看到它。

Stackblitz 示例在这里

很难看到，因为列元素呈现在选项卡窗口的底部，您几乎看不到它们在网格底部突出。此外，如果您分页到网格的下一页，它们会正确呈现，即使在您回页时在第一页上也是如此。

我尝试在选项卡切换后执行 gridApi.refreshCells() ，但它什么也没做。

添加选项卡后，我正在设置选项卡标题。正因为如此，一半的选项卡不在屏幕上。有没有办法重新调整标签？

stackblitz代码在这里

- 编辑https://github.com/angular/components/issues/17853，似乎这是一个问题。

问题是当我想更改选项卡时，它会显示一条错误消息：

我的代码如下所示：

在选项卡上更改app-list-tablecomponent.ts 代码：

逻辑获取数据源 onInit 的数据，因此当我切换选项卡时它将被加载。但我不确定，这会导致问题。

更新：

这个问题被认为是“边缘情况”，Angular 团队不会修复。您可以查看此 github 问题以获取完整详细信息：https ://github.com/angular/components/issues/23051 。

我仍然喜欢解决方法。我试图禁用选项卡组上的涟漪效应并在选项卡更改时触发它，但我在单个选项卡上触发它时遇到了一些问题。任何方向将不胜感激。

原文说明：

我正在使用 Angular 11 和 Angular 材质。我有一个带有“mat-stretch-tabs”指令的简单选项卡组，以便根据内容将选项卡扩展到正确的宽度。但是，如果您单击内容宽度大于前一个选项卡内容的选项卡，则波纹效果不会应用于整个选项卡宽度，而只会应用于初始选项卡宽度，如下面的屏幕截图所示：

我创建了一个 stackblitz 来说明它：

https://stackblitz.com/edit/angular11-mat-stretch-tabs-ripple-not-apply-to-full-tab?file=src/app/app.component.ts

只需在选项卡（标签 1 和标签 2）之间单击，然后查看第二个选项卡上的涟漪效果。

我错过了什么还是有一个简单的解决方法？

编辑： 据我了解，“stretch-tabs”指令可用于这个特定用例，我希望选项卡增长以匹配内容大小，但它的默认涟漪效应效果不佳（随意指出我的误解）。我不想为父卡（包含选项卡组）设置固定宽度，因为它固定了选项卡的宽度。相反，选项卡宽度应根据其包含的内容而变化。我想知道是否有办法解决这个问题。

我使用材料选项卡示例。我在所有三个选项卡中选择最后一个选项卡。当我调整面板的宽度时，选定的选项卡会滚动到视图之外。

如图所示，第三个是不可见的。有没有办法将第三个自动滚动到视图中？（例如，通过按钮操作）

用例：我有一个布局，它通过用户单击更改组件的宽度，并且所选选项卡位于最左侧 - 与此处的示例相反，它位于右侧。在我的用例中，用户几乎不知道有一个选项卡窗格——除非他知道箭头的含义。

==> 所以我想将标签滚动到视图中。怎么做？