angular - 如何使用内容中的按钮更改角度选项卡？

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>

标签： angularangular-materialangular7

Answer 1

考虑遵循tab-panelhtml 结构。

<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();
     }
   }
}

演示显示从不同选项卡内容中存在的按钮切换选项卡