问题标签 [mat-tab]

我必须单击以下菜单“文本视图”选项卡（mat-tab-link）两次以使路由器插座变为活动状态并在选项卡下划线。我知道这是因为单选按钮的documents.component.html 内容，它不会变为活动状态，除非我在“文本视图”选项卡上单击两次。然后“选项 4”按钮显示为活动状态，选项卡下划线。

文档-pane.component.html

文档-pane.component.ts

应用程序路由.module.ts

文档.component.html

我尝试了其他几种代码实现，甚至是引导菜单栏，但都没有成功。非常感谢任何输入。我有哪些选择？

我想在 mat-tab-label 中显示文本，例如一些标题及其副标题。例如，在mat-card-header中，标题和副标题可以设置并显示在另一个之下。

是否可以像此屏幕截图一样显示 mat-label 中的文本？

这是我尝试过的stackbliz，但没有任何效果 - 所有标签总是内联显示。

我已按照本教程了解 angular 5+ 中的选项卡。

html:

我是 Angular 新手，不知道为什么我的所有内容都出现在我的导航栏内容中。而不是我正常Router-Outlet的app.component.html.

我的目标是只在导航栏中包含特定于选项卡（子部分）的内容，并且我的内容Router-Outlet像往常一样显示在主目录中。

我正在尝试获取带有 id 的 mat-tab 元素，但由于某种原因，命令 document.getElementById() 返回 null 而不是 mat-tab 元素。例子：

https://stackblitz.com/edit/angular-mn5tt6

有人可以说为什么会发生这种情况，是否有更好、正确的方法来获取 HTML 元素？

非常感谢您的帮助！

我的答案

我发现获取选项卡 HTML 元素的最佳方法如下

HTML 文件：

TS 文件：

堆栈闪电战：

https://stackblitz.com/edit/angular-mn5tt6-ahxi4j?file=app%2Ftab-group-basic-example.ts

我正在尝试创建一个包装器，该包装器MatTabs公开了所有属性，MatTabs并且遇到了这个问题： Angular Material Tabs not working with wrapper component。我向它添加了其他选项卡属性和事件。这些事件似乎正在正确触发。

当我添加一个新选项卡时出现问题。数组正在更新，但 UI 保持不变。

HTML

TS

自定义标签 StackBlitz。

MatTabs Stackblitz

理想情况下，我希望公开MatTabs提供开箱即用的所有功能，然后再公开一些。

我有一个数据集，其中包含一组面板，其中包含有关应加载到 mat-tab-group 中的组件的信息。mat-tab-group 中的选项卡可以关闭。为此，我更改了用于构建选项卡组的数据结构。因此，当我们有一个包含 4 个面板的数组（在选项卡组中呈现 4 个选项卡）并且我们删除一个面板时，该数组将只有 3 个值，并且只呈现三个选项卡。

问题是已删除选项卡中的组件实际上会保持活动状态。我通过在我的组件的构造函数中添加一个间隔来测试这一点。当组件消失时，我希望它真的消失了，但是间隔中的 console.log 会继续记录。

这是最小复制的堆栈闪电： https ://stackblitz.com/edit/angular-wfkpqq

我做了一些谷歌搜索并检查了文档，但我找不到任何关于关闭 mat-tabs 的信息。有一个家伙告诉某人这应该由用户实现，但他们并没有真正为您提供正确执行此操作的工具。

如何确保我的孤立组件被销毁？

[编辑] 问题是别的。我分离了一个动态插入的组件，以便我可以移动组件。我在关闭组件时也这样做了，因此面板被分离，因此永远不会调用 OnDestroy。我会接受唯一的答案，因为它引导我犯了错误。

我将我的项目用于Angular 材质选项卡，我在选项卡内使用了 mat 选项卡，我的问题是主选项卡第一个选项卡和子选项卡第一个选项卡标签名称未更改，我使用了不同的标签名称但未更改。您可以清楚地理解它请查看工作堆栈闪电战实时代码示例

数据源标签名称未显示

任何人都知道如何解决这个问题

谢谢

stackblitz 现场代码在这里

我的代码部分

我试图在选项卡之一之外显示下拉列表，用户应该能够单击下拉选项。任何人都可以请帮助并给出想法，我应该如何实现这一点。我试图上传stackBlitz，不知何故无法这样做。我会提供任何需要的信息。谢谢 ！！

我想在 mat-tab 上使用 Angular 5 中的 tinymce 编辑器。但是，当标签不活动时，它无法加载Tinymce编辑器所需的脚本文件。这是我的 HTML 代码

我正在尝试将我的图像粘贴到

但是无法实现。

我有标签里面的标签，是的。有人对此有解决方案吗？谢谢。