Question

这是component.html的一部分。如何将下一个选项卡从Tab1的按钮更改为Tab2，将Tab2的按钮更改为Tab 3，依此类推？

<mat-tab-group>
    <mat-tab label="First"> Content 1 
        <button (click)=?>next</button>
    </mat-tab>
    <mat-tab label="Second"> Content 2
        <button (click)=?>previous</button>
        <button (click)=?>next</button>
    </mat-tab>
    <mat-tab label="Third"> Content 3
        <button (click)=?>previous</button>
        <button (click)=?>submit</button>
    </mat-tab>
</mat-tab-group>

Answer 1

考虑使用tab-panel html结构。

<mat-tab-group #allTabs>
  <mat-tab label="Tab 1">
    <p>Tab 1 Content</p>
    <button mat-raised-button tabindex="-1" type="button" 
     color="warn" (click)='moveToSelectedTab("Tab 2")'>Move to Tab 2</button>
  </mat-tab>
  <mat-tab label="Tab 2">
    <p>Tab 2 Content</p>
    <button mat-raised-button tabindex="-1" type="button" 
    color="warn" (click)='moveToSelectedTab("Tab 1")'>Move to Tab 1</button>
  </mat-tab>
</mat-tab-group>

您可以在组件中找到所有选项卡，然后找到要移动的选项卡 label ，
然后在该选项卡上调用click方法。

moveToSelectedTab(tabName: string) {
  for (let i =0; i< document.querySelectorAll('.mat-tab-label-content').length; i++) {
  if ((<HTMLElement>document.querySelectorAll('.mat-tab-label-content')[i]).innerText == tabName) 
     {
        (<HTMLElement>document.querySelectorAll('.mat-tab-label')[i]).click();
     }
   }
}

Demo showing Tab Switching from Button present in content of different tab

如何使用内容中的按钮更改角度标签？

1 个答案: