如何在 Angular Material2 中获取活动选项卡

Question

我想获取哪个 tab 处于活动状态。我尝试使用 @ViewChild 装饰器并以这种方式访问元素属性，但它 returns 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 Preview

Answer 1

嗯，我不确定我是否理解你的问题，因为默认情况下索引总是从零开始计数除非你手动设置 [ selectedIndex]property。

无论如何，如果你真的想看到在初始化时选择了哪个选项卡，你可以实现AfterViewInit接口并执行以下操作：

export class AppComponent implements AfterViewInit, OnInit {

...

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

另一方面，如果您想根据 changes 检查选择了哪个选项卡（更有意义的是），这里是：

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

DEMO

Answer 2

根据 Material 文档 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".获取选定选项卡索引的方式 on-load（模板加载后）以及 tab 聚焦时的方式.

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

my.component.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

这就是您可以激活 index 个活动 angular material 标签的方式

.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 显示。 later on as and when the other tab is selected, the index also changes.这可以通过 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
}

如何在 Angular Material2 中获取活动选项卡

How to get the active tab In Angular Material2

angular

angular-material2