问题标签 [mat-tab]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
451 浏览

angular - 为什么 mat-tab-nav-bar 需要点击 2 次才能加载路由器内容?

我正在使用来实现带有路由器链接mat-tab-nav-bar的 angular mat-tab功能。

xxx.component.html

xxx.component.ts

问题是当我加载mat-tab-nav-bar嵌入的组件时,应用程序不会加载第一个选项卡的全部内容。它只加载静态的标题。动态生成的其余部分(对数据库的 http 调用)不显示。我需要再次单击选项卡以加载内容。换句话说,我必须点击 2 次。有时,我只需要再次单击文档正文中的某个位置即可加载内容。

但是当我使用默认mat-tab标签时,我可以在导航到组件时立即获取内容。

这解决了这个问题,但另一方面,我不能为此选项使用路由器链接。

如果实现了该功能,则该组件mat-tab确实属于带有使用子路由器的自定义模块:

];

任何提示如何解决这个问题?我不介意哪个选项可以解决问题。mat-tab-nav-bar或_<mat-tab-group><mat-tab...

0 投票
1 回答
1698 浏览

angular - Angular 7 *ngIf 条件基于活动选项卡

我正在尝试根据当前处于活动状态的选项卡显示或隐藏按钮。单击不同的选项卡后它可以工作,但在加载时它不会显示按钮或默认选项卡的内容。

我正在使用 mat-toolbar 和 mat-tabs。选项卡的顺序是:

这里(button)将是基于活动选项卡的条件。

tabs.component.html:

tabs.component.ts:

0 投票
1 回答
1106 浏览

angular - 角材料复选框和选项卡

我使用了 Angular 材料,即“Mat-Checkbox 和 Mat-Tab”。我想保持复选框的选中状态,但是当我更改选项卡时,它将全部取消选中。即使我更改为其他选项卡,是否有任何方法可以保持复选框状态?

先感谢您。

0 投票
3 回答
4703 浏览

angular - 带有自定义组件的角材料选项卡

我有一个用于创建材料选项卡的对象列表,如下所示:

我需要为每个选项卡添加一个单独的角度组件。有没有一种方法可以让我在每个 tripOption 对象上添加一个组件,然后以某种方式将它从所述对象嵌入到这里?有没有一种体面的方法可以做到这一点,还是我必须为列表中的每个项目实际编写一个标签?

0 投票
2 回答
374 浏览

angular - 子组件返回tab-id时如何更改mat-tab的背景颜色

每个选项卡都是子组件,并且此页面具有可编辑的数据源。

当有人在子组件中更改表单值时,子组件将 tab-id 返回给父组件。

parent-component 为多个 mat-tab 迭代 tab-id。因此,当从子组件收到标签 ID 时,我想更改标签背景颜色。

我是这样编码的。但不起作用,因为当父组件获得 tab-id 时,我不知道如何再次启动 changeTabColor()。

父组件.html

父组件.scss

父组件.ts

子组件.ts

0 投票
1 回答
4211 浏览

css - mat-tab-group 宽度对 flex 中的宽度 100% 容器没有反应

目前我正在开发一个项目,其中包含一个 flexbox 设计,其中一个mat-tab-group。我面临的问题是,它没有对父母的宽度做出正确的反应,而且似乎只有类中的max-width属性会.parameters影响宽度。

删除该mat-stretch-tabs属性也无济于事。使用像素值作为 flex-basis 应该使宽度计算独立于内容。但是,一旦选项卡的数量超过目标宽度所允许的范围,内容就会与mat-tab-group. 上述结构的样式看起来像

我也测试了一个{width: 100%}属性,mat-tab-group但它也没有影响。以下内容完全删除了水平滚动(并且它使用/deep/了我想避免的)。

你有什么想法?我错过了什么?

0 投票
1 回答
355 浏览

angular - 减小 mat-tab 的默认宽度

在此处输入图像描述我想在移动应用程序中使用 mat-tab-group。问题是默认宽度大于我的 Windows 应用程序。我想知道如何减少 mat-tab-group 的默认宽度。

0 投票
1 回答
1134 浏览

angular - routeParams 更改后如何更改 mat-tab?

我正在尝试重置mat-tab-group以在更改时将第一个选项卡设置为活动状态routeParams

ts文件

.html 文件

在第二个选项卡中,我有一个指向另一张卡的路由器链接 - 因此,当路由器导航到此卡组件时,不会重新加载(路由为/url/:id)。但是第一个选项卡没有激活 - 即使我在路由参数的订阅中设置索引。

0 投票
1 回答
2179 浏览

angular - 如何在 mat-tab 中导航不同的子组件?(不在主插座中)

我的 AppComponent 包含一个 sidenav 和一个路由器插座。每个菜单项都允许我导航到不同的功能。每个功能模块都有四个主要组件:

  • 组件 1:列表 => url /feature/list
  • 组件 2:详细信息 => url /feature/details/123
  • 组件 3:编辑 => url /feature/edit/123
  • 组件 4:添加 => url /feature/add

当我从 sidenav 单击功能时,默认情况下会显示功能的列表组件。

在每个功能的列表组件上,我使用导航按钮导航到相应的详细信息,通过 URL编辑添加this.router.navigateByUrl('/feature/details/123')组件,如下所示:

我的一项功能mat-tab-group在其“详细信息组件”中有一个。当我导航到该组件(例如/feature/details/123)时,我还希望能够单击某个选项卡并查看列表组件。但需要明确的是,我希望这个组件在选项卡中可见,而不是在主插座中。此列表应显示一个表格,其中包含一些来自 id:123 的数据。此外,这个嵌入的列表组件应该有不同的按钮,以允许我导航到其相应的详细信息、编辑和添加组件。

我试图实现辅助路由,并命名路由器插座,但我一定做错了,因为我无法让它工作。我可能无法正确理解内部工作原理。

有人可以解释我应该如何解决这个问题吗?如果有可能呢?

0 投票
1 回答
3137 浏览

angular - 有没有办法根据从这些选项卡的内容提交的表单在角度材料选项卡之间切换?

我正在开发一个有角度的网络应用程序。我需要根据在这些选项卡的内容中执行的操作来控制我的角度选项卡。例如,我有以下选项卡:项目信息、变化、定价、库存等,这些选项卡包含由角度组件加载的表单。当项目信息表单成功提交时,我想自动切换到变体选项卡。此外,在保存项目信息之前,用户不应该能够切换到变体选项卡。