如何在 Angular Material2 中獲取活動選項卡

Question

我想知道哪個選項卡處於活動狀態。 我嘗試使用@ViewChild裝飾器並以這種方式訪問​​元素屬性，但它返回null 。

成分：

import {Component, OnInit, ViewChild} from '@angular/core';

@Component({
  selector: 'material-app',
  template: `
  <md-tab-group #tabGroup>
      <md-tab label="Tab 1">Content 1</md-tab>
      <md-tab label="Tab 2">Content 2</md-tab>
  </md-tab-group>
  `
})
export class AppComponent implements OnInit {

  @ViewChild('tabGroup') tabGroup;

  constructor() {
  }

  ngOnInit() {
    console.log(this.tabGroup); // MdTabGroup Object
    console.log(this.tabGroup.selectedIndex); // null
  }

}

Plunker 預覽

Answer 1

好吧，我不確定我是否理解您的問題，因為默認情況下索引總是從零開始計數，除非您手動設置[selectedIndex] property 。

無論如何，如果您真的想查看初始化時選擇了哪個選項卡，您可以實現AfterViewInit接口並執行以下操作：

export class AppComponent implements AfterViewInit, OnInit {

...

  ngAfterViewInit() {
    console.log('afterViewInit => ', this.tabGroup.selectedIndex);
  }
}

另一方面，如果您想根據更改檢查選擇了哪個選項卡（更有意義），請執行以下操作：

HTML：

<mat-tab-group #tabGroup (selectedTabChange)="tabChanged($event)">
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

成分：

tabChanged(tabChangeEvent: MatTabChangeEvent): void {
  console.log('tabChangeEvent => ', tabChangeEvent);
  console.log('index => ', tabChangeEvent.index);
}

演示

Answer 2

根據材料文檔 Angular Material 選項卡在選項卡更改時輸出事件@Output() selectedTabChange: EventEmitter<MatTabChangeEvent>

您的模板：

<mat-tab-group (selectedTabChange)="tabChanged($event)">
  <mat-tab>
    <ng-template mat-tab-label>Tab 1</ng-template>
    Tab Content
  </mat-tab>
  <mat-tab>
    <ng-template mat-tab-label>Tab 2</ng-template>
    Tab Content
  </mat-tab>
</mat-tab-group>

你的打字稿：

import { MatTabChangeEvent } from '@angular/material';

public tabChanged(tabChangeEvent: MatTabChangeEvent): void {
    console.log(tabChangeEvent);
}

Answer 3

“@angular/material”：“^ 6.2.1 ”。 在加載時（在加載模板后）以及在選項卡聚焦時獲取選定選項卡索引的方式。

my.component.ts

export class MyComponent implements OnInit, AfterViewInit {
    @ViewChild('tabGroup') tabGroup;

    ngAfterViewInit() {
      console.log(this.tabGroup.selectedIndex);
    }

    public tabChanged(tabChangeEvent: MatTabChangeEvent): void {
      console.log(tabChangeEvent);
    }
}

我的組件.html

<mat-tab-group #tabGroup (focusChange)="tabChanged($event)" [selectedIndex]="1">
    <mat-tab>
        <ng-template mat-tab-label>Tab 1</ng-template>
        Tab Content
    </mat-tab>
    <mat-tab>
        <ng-template mat-tab-label>Tab 2</ng-template>
        Tab Content
    </mat-tab>
</mat-tab-group>

Answer 4

這是您如何獲得活動angular material選項卡的活動index

.html文件

<div>    
<mat-tab-group #tabRef (selectedTabChange)="logChange(tabRef.selectedIndex)">
  <mat-tab label="ALL"></mat-tab>
  <mat-tab label="Delivered"></mat-tab>
  <mat-tab label="Pending"></mat-tab>
  <mat-tab label="Cancelled"></mat-tab>
</mat-tab-group>    
</div>

.ts文件

logChange(index)
{
  console.log(index);
} 

不要忘記在app.module.ts文件中添加導入

import { MatTabsModule } from '@angular/material/tabs';

Answer 5

默認情況下，索引為 0 的選項卡由 mat-tab-group 顯示。 稍后選擇其他選項卡，索引也會更改。 這可以通過MatTabChangeEvent檢測到

HTML 內容

    <mat-tab-group (selectedTabChange)="onTabChange($event)">
    
        <mat-tab label="First Tab">
         <p>Hello, Tab 0</p>
        </mat-tab>
    
        <mat-tab label="Second Tab">
         <p>Hello, Tab 1</p>
        </mat-tab>
    
        <mat-tab label="Third Tab">
         <p>Hello, Tab 2</p>
        </mat-tab>
    
    </mat-tab-group>    

.ts 文件內容

onTabChange(event : MatTabChangeEvent) {
    
    console.log(event.index);
    // do something based on selected tab index
}