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


angular angular-material2
person Runtime Terror    schedule 14.01.2017    source источник

Ответы (5)


arrow_upward
76
arrow_downward

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

ДЕМО

person developer033    schedule 14.01.2017
comment
Второй случай - это то, что я искал, но о первом тоже полезно знать. Спасибо @ developer033! - person Runtime Terror; 15.01.2017
comment
Привет! Я использовал этот код, и у меня возникла ошибка, что this.tabGroup не определена. Только после того, как onSelectChange Angular увидит этот элемент dom. Как будто ngAfterViewInit () у меня не работает. Вы знаете, что происходит? - person Roberto; 26.07.2017
comment
Для первого варианта, как получить имя (вместо индекса) вкладки, которая автоматически выбирается при инициализации? - person FiringBlanks; 21.10.2017
comment
@FiringBlanks, вы имеете в виду label? Если это так, вы можете просто получить доступ к tabChangeEvent.textLabel. - person developer033; 22.10.2017
comment
Да, метка, но я хочу получить ее при первой инициализации группы вкладок, а не слушать, когда вкладки меняются пользователем. Мне нужно знать метку вкладки, с которой начинается группа вкладок. - person FiringBlanks; 22.10.2017
comment
@Budi Я сменил ссылку. - person developer033; 26.07.2019

arrow_upward
18
arrow_downward

Согласно документации по материалам, вкладки 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);
}
person Uliana Pavelko    schedule 21.11.2017
comment
как узнать индекс вкладки при загрузке страницы ?. В настоящее время при загрузке страницы ваш метод не регистрирует index. Любая помощь с этим очень ценится, так как я на какое-то время застрял. Спасибо вам за помощь. - person Maddy; 21.06.2018
comment
Это правильно selectedTabChange только генерирует tabChangeEvent только при щелчке, когда ванна изменена. Не уверен, что есть способ, который будет работать из коробки. Вы можете попробовать ‹mat-tab-group #tabGroup› @ViewChild ('tabGroup') tabGroup; ngAfterViewInit () {console.log (this.tabGroup.selectedIndex); } - person Uliana Pavelko; 21.06.2018

arrow_upward
11
arrow_downward

"@ 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>
person Uliana Pavelko    schedule 21.06.2018

arrow_upward
0
arrow_downward

Таким образом можно активировать 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';

person R15    schedule 22.10.2020

arrow_upward
0
arrow_downward

По умолчанию вкладка с индексом 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
}
person Nikhil    schedule 07.05.2021