角度6：切换黑白标签

Question

我正在开发一个Angular 6应用程序，我在这里尝试做的是，只要用户在可见输入字段中插入信息并单击保存，我希望视图更改为“产品”选项卡。 产品是一个单独的组件，也有自己的模板。 感谢帮助

Answer 1

您可以在mat-tab-group中向selectedIndex输入添加变量。

index = 0; // Or tab you want mat-tab-group to start with

并像这样使用它

<mat-tab-group [selectedIndex]="index">

并在点击时创建一个按钮功能，将索引更改为分配给“产品”选项卡的编号，因为它是您的第二个选项卡，该编号为1。

<button (click)="index = 1">

您可以在此处阅读有关mat-tab的输入和输出的更多信息： https ： //material.angular.io/components/tabs/api并查看示例。

Answer 2

在此示例中，您将使用带有嵌套选项卡的matTabGroup。 MatTabGroup允许您使用[selectedIndex]设置开始选项卡。

例：

<mat-tab-group [selectedIndex]="1">
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>