Как получить активную вкладку In 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);
}

DEMO

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

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. позже, когда будет выбрана другая вкладка, индекс также изменится. Это можно обнаружить с помощью 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
}