角度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>