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

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

10
angular angular-material2

3 ответов

Ну, я не уверен, что хорошо понял ваш вопрос, потому что по умолчанию индекс всегда начинает отсчет с нуля если установить вручную [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);
}

демо

24

согласно материальной документации угловые вкладки материала выводят событие на изменение вкладки @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". Способ получения выбранного индекса tub on-load (после загрузки шаблона) и когда направлена.

@ ViewChild('tabGroup') tabGroup;

export class MyComponent implements OnInit, AfterViewInit {
   ngAfterViewInit() {
     console.log(this.tabGroup.selectedIndex);
   }

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

<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>
1