问题标签 [mat-tab]

I have a group of tabs in Angular material tab group as below and calling a method setGridHeight in every component ( every tab ).

So in the TS code in every component I am calling a method called setGridHeight which is called on tab change.

The issue is if I control the components redering through *ngIf, the selectedtabChange call throws an error ( since it cant call a method of an unrendered component( unrendered tab) )

How do I then change the call to only methods from only rendered components ( tabs ).

for ex: showQueues = [true, false, true];

showQueues[1] = false and is not rendered and thus queue1.setGridHeight() throws an exception Cannot read property 'setGridHeight' of undefined.

所以我可能错过了文档中明显的一些东西，但我只是在寻找一种简单的方法来查找在以下场景中选择了哪个选项卡：

看法

显然，在我的实际代码中条件是动态的。这仅用于示例。

脚本

问题

在上面的脚本中，event.index如果单击第一个选项卡将返回 0，如果单击第三个选项卡将返回 1，因为第二个选项卡由于*ngIf.

这对我来说确实有意义，但是根据开始显示的选项卡，很难知道实际单击了哪个选项卡。

我可以：

• 再次测试其中的每个选项卡条件onTabChange以找出哪个索引对应于哪个选项卡，
• （可能）绑定ViewChild(ren)对某物的引用并通过其原生 DOM 元素检索数据（例如data-属性）。

不过，这两个选项似乎都超级矫枉过正。

问题

Label3在上面的代码中，如果不测试标签本身（这显然是可怕的），那么知道点击标签的选项卡的适当方法是什么？

简单的 Stackblitz如果有帮助的话。

我需要在某些User Preferences屏幕上添加动态选项卡。主要首选项选项卡可以是具有静态内容的静态选项卡，但第二个选项卡应具有嵌套mat-tab元素。

这些额外的动态首选项来自后端，然后允许我使用 an*ngFor来呈现额外的选项卡。

我现在看到的问题是 tab labels。标签文本从第一个嵌套选项卡中获取其值，而不是从label我正在设置的属性中获取值。

请在 stackblitz 上查看我的示例 - https://stackblitz.com/edit/mat-tabs-nested?embed=1&file=app/tab-group-async-example.html

来自在线项目的代码片段是：

如果单击“更多动态首选项”选项卡，则选项卡标题文本变为“第一”。在第二个选项卡上也发生了同样的情况，我正在同步加载其选项卡内容，而不是异步示例。

我无法更改似乎限制了我的 mat-tab 大小的 mat tab body wrapper。

前任。

抱歉，Stackoverflow 迫使我注释掉一些不必要的东西，正如你在 NG-template 和我的条形图上看到的那样。

编辑：

您实际上可以使用 ::ng-deep 覆盖这样的元素（即角材料的垫子）

我想更改Angular 材质选项卡的 样式mat-ink-bar。

我想归档这样的设计：Jsfiddle example

问题是mat-ink-bar已经absolute定位并且我无法显示我的::after元素。有没有办法我可以归档这个？

这是我在 stackblitz 上尝试的内容：Mat tab on stackblitz

我的风格位于style.css. 如果您使用开发工具，底部的三角形将被隐藏。我无法使用z-index.. 显示它。任何帮助将不胜感激。

这里的代码：

css

html

应该是这样的：

这mat-tab-group取决于浏览器，因此每次单击提交按钮时都会触发。我需要知道每次单击提交按钮时如何获得索引为 0 的第一个选项卡才能获得焦点。
我知道它与索引和那些东西有关，但我不知道，我正在使用 MatTabChangeEvent 控制索引。

使用 Angular Material 的 mat-tab-nav-bar 时，选项卡不会出现在 Angular 6 SPA 上。

这是代码：

forms.component.html：

表单-routing.module.ts

forms.component.ts

app.module.ts

在 forms.component.html 中，当我单独指定 navLinks 时，选项卡会显示如下。但是，当我单击应用程序名称选项卡并转到组件时，选项卡会消失。

所以有两个问题：

1. 我不能在 *ngFor 中使用 navLinks。
2. 单独指定选项卡名称时，单击其中一个选项卡并转到组件后，这些选项卡就会消失。

谢谢您的帮助！

我使用 实现了搜索功能mat-tab，我不需要在初始加载时选择选项卡。仅当用户单击特定选项卡时，选项卡才应处于活动状态。

目前，第一个选项卡在加载时处于活动状态。我试过设置selectedIndex="null"但没有用。此外，我需要在单击按钮时重置选定的选项卡。

任何人都可以建议一种实现您在上面看到的分页功能的好方法，在<mat-tab-header>水平<mat-list>.

我不需要使用<mat-list>，我只是认为这是最明显的容器。

在我的 angular-electron 应用程序中，我使用 mat-tab-group，在每个选项卡中我加载相同的组件实例。

我有两种创建新标签的方法： - 一种是通过单击包含 mat-tab-group 的组件中的按钮 - 第二种是通过 IPC 消息触发的。

两种方式都调用相同的函数，其中我将一个新对象推送到一个数组，选项卡是通过 *ngFor 在这个数组上创建的。

效果：

虽然单击按钮创建的“第二个”选项卡行为正常，但通过 IPC（“第三个”）触发的选项卡不会：

单击“第三个”选项卡时会显示涟漪效果，但选项卡上的单击事件（selectedTabChange）仅在我第二次单击窗口中的某个位置时才会触发。此外，选项卡的内容（包装在 ng-template 中）仅在第二次单击后才会更改。

保存选项卡的组件以及在每个选项卡中实例化的组件都在更改检测中使用推送策略。

我很确定这与 ngZones 有关，但我不确定如何解决这个问题。谢谢你的帮助！

动画 Gif 在这里：

切换标签

代码 HTML：

代码 TS：