ngx-materialize 以编程方式切换选项卡

【问题标题】：ngx-materialize Switch Tabs programmaticallyngx-materialize 以编程方式切换选项卡
【发布时间】：2019-02-19 19:49:03
【问题描述】：

我正在使用 Angular 7 和 ngx-materialize (ngx-materialize GitHub) 问题是我制作了一个带有选项卡的表单，我想用一个按钮来改变活动选项卡，出于可访问性目的，这个想法是在最后一个输入“选项卡”到按钮中，如果表单有效可以继续到另一个标签。

现在我可以使用 Jquery 获取当前活动选项卡

$('ul.tabs .active').attr('href')

但我无法使用 Jquery 在另一个选项卡中“单击”，所以我认为这不是方法，我必须将新选项卡设置为活动状态，而将前一个选项卡设置为非活动状态。知道我该怎么做吗？

我相信使用与 MaterializeCss 相同的功能，但我无法找到任何东西。

提前致谢！

【问题讨论】：

【解决方案1】：

由于您处于 Angular 组件的上下文中，因此您实际上不需要使用 jquery，而是可以提升 Angular 为您提供的功能

尝试将哈希标识符添加到您的选项卡中，例如#tab1

<mz-tab-item
  [active]="'true'"
  [disabled]="'false'"
  [label]="'Tab 1'"
  #tab1
>
  Tab 1
</mz-tab-item>

并在控制器内部执行此操作：

@ViewChild('tab1') tab1;
...
this.tab1.getNativeElement().click();

您可以在ViewChild 上找到整个文档https://angular.io/api/core/ViewChild

【讨论】：

谢谢@jahller，我已经尝试过了，但是 ViewChild 总是得到“未定义”，我认为这是我尝试使用的按钮的问题，因为加载了 AfterViewInit，因为它是表单的一部分，所以我认为是生命周期的另一个问题，而不是尝试进行点击事件的方式。