Как получить активную вкладку In Angular Material2

Я хочу, чтобы какая вкладка активна. Я попытался использовать декоратор @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

Ответы

Ответ 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

Ответ 2

В соответствии с документацией материалов Вкладка "Угловые материалы" выводит событие при изменении табуляции @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);
}

Ответ 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>