Как получить активную вкладку в угловом материале2

Question

Я хочу получить, какой из 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 Preview

Answer 1

Ну, я не уверен, если я хорошо понял ваш вопрос, потому что, по умолчанию индекс всегда начинает отсчет с нуля если не установлено вручную [selectedIndex]property.

Во всяком случае, если вы действительно хотите, чтобы увидеть, какая вкладка выбрана на инициализации можно реализовать интерфейс AfterViewInit и выполните следующие действия:

export class AppComponent implements AfterViewInit, OnInit { 

... 

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

С другой стороны, если вы хотите, чтобы проверить, какая вкладка подбираются на основе изменения (что имеет смысл), здесь вы идете:

HTML:

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

Компонент:

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

DEMO

Answer 2

Согласно Материал документации угловыми продукции Материал язычков событие на изменение вкладки @output() selectedTabChange: EventEmitter

Ваш шаблон:

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