매트 탭 그룹을 사용하여 Angular 2 재료에서 매트 탭을 프로그래밍 방식으로 선택합니다.

매트 탭 그룹을 사용하여 Angular 2 재료에서 매트 탭을 프로그래밍 방식으로 선택합니다.

이벤트가 발생할 때 특정 탭을 선택하려면 어떻게 해야 합니까?

로 시도했습니다.[selectedIndex]="selectedTab"변경selectedTab탭 인덱스에 연결해야 하지만 탭이 로드된 후에는 작동하지 않는 것 같습니다.

UPDATE (최신 앵글+소재 사용)

여러 가지 방법이 있습니다.

1. 가능한 솔루션, 양방향 데이터 바인딩 사용

<button mat-raised-button (click)="demo1BtnClick()">Tab Demo 1!</button>
<mat-tab-group [(selectedIndex)]="demo1TabIndex">
    <mat-tab label="Tab 1">Content 1</mat-tab>
    <mat-tab label="Tab 2">Content 2</mat-tab>
    <mat-tab label="Tab 3">Content 3</mat-tab>
</mat-tab-group>

public demo1TabIndex = 1;
public demo1BtnClick() {
  const tabCount = 3;
  this.demo1TabIndex = (this.demo1TabIndex + 1) % tabCount;
}

2. 템플릿을 사용하여 가능한 솔루션을 제공하고 클릭 기능을 통해 전달합니다.

<button mat-raised-button (click)="demo2BtnClick(demo2tab)">Tab Demo 2!</button>
<mat-tab-group #demo2tab>
    <mat-tab label="Tab 1">Content 1</mat-tab>
    <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

public demo2BtnClick(tabGroup: MatTabGroup) {
  if (!tabGroup || !(tabGroup instanceof MatTabGroup)) return;

  const tabCount = tabGroup._tabs.length;
  tabGroup.selectedIndex = (tabGroup.selectedIndex + 1) % tabCount;
}

3. 가능한 솔루션, @ViewChild 사용

<button mat-raised-button (click)="demo3BtnClick()">Tab Demo 3!</button>
<mat-tab-group #demo3Tab>
    <mat-tab label="Tab 1">Content 1</mat-tab>
    <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

@ViewChild("demo3Tab", { static: false }) demo3Tab: MatTabGroup;

public demo3BtnClick() {
  const tabGroup = this.demo3Tab;
  if (!tabGroup || !(tabGroup instanceof MatTabGroup)) return;

  const tabCount = tabGroup._tabs.length;
  tabGroup.selectedIndex = (tabGroup.selectedIndex + 1) % tabCount;
}

생방송: https://stackblitz.com/edit/angular-selecting-mattab?file=src%2Fapp%2Fapp.component.ts

누군가에게 도움이 될 경우, 설정하는 것도 가능합니다.selectedIndex사용자 구성 요소의 MatTabGroup에 있습니다.

HTML에 다음이 있는 경우:<mat-tab-group #tabs>다음을 사용하여 구성 요소에서 참조를 얻을 수 있습니다.@ViewChild('tabs') tabGroup: MatTabGroup;.

그러면 할 수 있습니다.this.tabGroup.selectedIndex = newIndex;OnInit 함수 또는 다른 위치에 있습니다.

저도 비슷한 문제가 있었습니다.저의 경우 사용자가 구성 요소를 떠나기 전에 있었던 탭을 보여줘야 했습니다.현재 선택한 탭 인덱스를 서비스에 입력하여 해결했습니다.

HTML 템플릿에는 다음이 있습니다.

<mat-tab-group [selectedIndex]="getSelectedIndex()" (selectedTabChange)="onTabChange($event)">

onTabChange and get Select의 구현인덱스는 다음과 같습니다.

    getSelectedIndex(): number {
        return this.appService.currentTabIndex
    }

    onTabChange(event: MatTabChangeEvent) {
        this.appService.currentTabIndex = event.index
    }

서비스 코드는 다음과 같습니다.

export class AppService {
    public currentTabIndex = 1  //default tab index is 1
}

저도 같은 문제가 있었고 위의 답변을 시도했지만 도움이 되지 않습니다.제 솔루션은 다음과 같습니다.

내 유형 스크립트 코드에서 먼저 변수를 선언합니다.

selected = new FormControl(0); // define a FormControl with value 0. Value means index.

다음 함수에서 사용할 수 있습니다.

changeTab() {
    this.selected.setValue(this.selected.value+1);
 } //

html에서,

 <mat-tab-group [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)">
            <mat-tab label="label0">0</mat-tab>
            <mat-tab label="label1">1</mat-tab>
            <mat-tab label="label2">2</mat-tab>
            <mat-tab label="label3">3</mat-tab>
            <mat-tab label="label4">4</mat-tab>
            <mat-tab label="label5">5</mat-tab>
</mat-tab-group>

<button (click)="changeTab()">ChangeTab</button>

@Input()selectedIndex: number | null: The index of the active tab.  

SelectedIndex expects a number binding as property, so you can select any tab starting from 0 to (workflow_list.length - 1)

<mat-tab-group class="m-t-30" [selectedIndex]="2">
    <mat-tab label="{{wf.ApproverName}}" *ngFor="let wf of workflow_list">
    </mat-tab>
</mat-tab-group>

저한테는 효과가 있어요.

    isActiveTab = 0 // First tab
    isActiveTab = 1 // Second Tab
        
       <mat-tab-group mat-align-tabs="start" 
         (selectedTabChange)="onTabChanged($event.index)"
          [selectedIndex]="isActiveTab" >
        
         <mat-tab label="One"> </mat-tab>
         <mat-tab label="Two"> </mat-tab>
            
       </mat-tab-group>

저는 각도 10을 사용하고 ngFor로 매트 옵션을 만들고 있습니다. 저의 경우 어떤 솔루션도 작동하지 않았고 마침내 tabIndex가 ngFor에 있는 목록의 객체 인덱스라는 것을 알게 되었습니다.

<mat-tab-group mat-align-tabs="start" style="width: 100%;text-align: start;overflow: hidden"
                     (selectedTabChange)="setNodeInfo($event)" [(selectedIndex)]="selectedIpIndex">
        <mat-tab *ngFor="let nodeTab of nodeList" [tabIndex]="nodeTab.id">
          <ng-template mat-tab-label>
            <label>{{nodeTab.ip}}</label>
            <mat-icon class="close-btn" style="font-size: medium;z-index: 100" (click)="tabClose(nodeTab)">close
            </mat-icon>
          </ng-template>
        </mat-tab>
      </mat-tab-group>

보시다시피 HTML로 각 tabIndex 값을 가져옵니다.

[tabIndex]="nodeTab.id"

하지만 그것은 작동하지 않고 스스로 선택하여 목록의 위치 색인을 얻습니다.

그리고 내 파일에서 나는 selectIp를 채웁니다.다음과 같은 색인:

this.selectedIpIndex = this.nodeList.indexOf(node);

언급URL : https://stackoverflow.com/questions/41937176/programmatically-select-mat-tab-in-angular-2-material-using-mat-tab-group