问题标签 [mat-tab]

我有一个用户报告说，当他们在数据仍在加载时不断在选项卡之间切换（每个选项卡单独的 API 调用）时，选项卡将开始自行切换，用户必须刷新页面才能重新获得控制权。

https://streamable.com/nu5l2s

我尝试禁用动画，但问题仍然存在。我尝试禁用/延迟选项卡切换，直到每个选项卡完成加载数据，但我想知道是否有更好的方法，同时仍允许用户在选项卡之间切换。

这是带有一个选项卡的代码片段。每个选项卡都有相同的逻辑

我mat-tab-nav-bar用来显示 2 个选项卡，如下所示：

tabs.component.html：

tabs.component.ts：

app.routing.module.ts：

当我导航到 /products 时，该选项卡处于活动状态。但是当我导航到 /products/:productID 时，该选项卡未处于活动状态。既然它在 /products 路线中，我怎样才能让它保持活动状态？

我还尝试创建 /products 路由的 /products/:productID 子级，但它不起作用。在我的app-routing.module.ts中更新：

我在 a 的mat-toolbar上方放置了mat-tablea mat-tab，我想让工具栏和表格标题始终可见，但是，当我向下滚动页面时，工具栏会与表格重叠。标题向上滚动到顶部，mat-tab我似乎无法让表格标题停在垫子工具栏的底部。

环顾四周，人们建议使用粘性位置 css 属性，它可以使我的工具栏保持可见，但表格标题仍然重叠。我不知道如何解决这个问题。下面的例子：

滚动前标题位置的图像

滚动后标题位置的图像

布局

风格

我想在打开对话框时显示 2 个选项卡。但对话框仅包含选项卡文本，选项卡不起作用。这是我的代码，

对话框概述示例-dialog.component.html

example.component.html

选项卡没有出现在对话框中

参考：https ://stackblitz.com/edit/angular-5zbvzd

在 mat-dialog 上渲染 mat-tabs 时出现问题。我使用 selectedIndex 动态选择选项卡的索引，并且我想异步更改它，例如服务器端调用或 setTimeout。但它不起作用。选项卡正文不显示该索引的内容。我在 stackblitz 中重现它。

https://stackblitz.com/edit/mat-tabs-on-mat-dialog-problem

注意：我知道它可以使用 500 毫秒的 setTimeout 来解决。但这不是预期的解决方案。

我正在使用 Angular 10。在CoreModule课堂上我有组件NavbarComponent。我在组件中有这个 HTML 模板NavbarComponent：

单击链接后，没有任何反应。URL 不变。一直都是一样的http://localhost:4200/home。在HomeModule模块的类中有一个带有 HTML 模板的组件：

该类HomeRoutingModule包含数组：

const routes: Routes = [{ path: '', component: HomeComponent }];

该类AppRoutingModule包含数组：

该类UsersRoutingModule包含数组：

项目结构：

我不知道如何使重定向UserRegistrationComponent进行。当我单击时： <mat-tab routerLink ="/user/registration "> URL 不会改变。

请帮忙。非常感谢。

我的网站上有多个标签，主标签组根本没有任何问题。但是，当我在选项卡上放置另一个选项卡组时，仅当单击其中一个选项卡时才会显示墨迹栏。

这是我的问题的图片：

当我单击一个选项卡时，如果它已经显示，则墨条将从屏幕外部进行过渡动画，并将其自身正确放置在应该在的位置：

（这里我点击了子标签组，子标签组 - Jeu vidéo - 没有反应）

这些选项卡功能齐全（单击它们时它们会正常反应）但我无法在不单击的情况下显示墨水选项卡。

在没有用户输入的情况下，我该怎么做才能让标签正确显示其墨水标签？

代码如下（目前没有javascript，但我可以添加一些）：

注意：添加 a[selectedIndex]="0"不会改变任何东西

编辑：我注意到在子垫选项卡组可见时调整屏幕大小也可以

我创建了一个 mat 选项卡组并使用 ng-for 使用路由器插座加载选项卡，当我添加新选项卡并导航 url 时，我的新路由组件被构建了两次，并且以前的选项卡内容被新内容替换。

打字稿代码：

导出类 MyTabComponent 实现 OnInit { 公共选项卡：任何；// 我在 HTML 中循环的属性 public selected = new FormControl();

问题是当第一次订阅函数调用它时，它会在选项卡下成功加载路由。下次调用时，指定 url 的组件被构造两次，之前的 tab 内容显示新的 tab 内容（之前的 tab 内容丢失）。

首次订阅时 ----- Tab1 (selected) | ------ Tab1 内容

当第二次订阅被调用时

表 1 | Tab2(已选) |

Tab2 内容

当我单击 tab1 时，我看到 tab2 内容（我面临的问题）

Tab1(选中) | 选项卡2

Tab2 内容

有人可以帮忙吗，为什么在添加第二个标签时，我以前的标签内容也加载了第二个组件。

提前致谢。

我在 mat-tab-group 中动态添加选项卡。mat-tab-header 在需要时不会添加分页控件并且内容溢出。有人可以帮我解决我所缺少的吗？

这是我所拥有的 -带有标题的标签

这就是我想要的 -带有侧边按钮的标签

这是我的代码 -

.html -

.ts -

查询 -

1. 如何隐藏标签页眉？（当我设置 display:none 时，标签正文也消失了）
2. 如何在mat-tab-group 中添加侧边按钮？（因为当你正常操作时，按钮不显示）
3. 任何其他方式可以给我想要的结果！

我相信正确的答案会帮助很多人。谢谢你。