web-dev-qa-db-fra.com

Comment obtenir l'onglet actif Dans Angular Material2

Je veux obtenir lequel onglet est actif. J'ai essayé d'utiliser un @ViewChild décorateur et accéder ainsi aux propriétés de l’élément, mais renvoie null.

Composant: 

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
  }

}

Aperçu de Plunker

angularangular-material2
22
Gabriel

Eh bien, je ne suis pas sûr d’avoir bien compris votre question car, par défaut, l’index commence toujours à compter à partir de zéro , sauf si vous définissez manuellement le [selectedIndex] property.

Quoi qu'il en soit, si vous voulez vraiment voir quel onglet est sélectionné sur initialisation, vous pouvez implémenter l'interface AfterViewInit et procéder comme suit:

export class AppComponent implements AfterViewInit, OnInit {

...

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

D'autre part, si vous voulez vérifier quel onglet est sélectionné en fonction de changements (ce qui est plus logique), voici ce que vous devez faire:

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>

Composant: 

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

DEMO

43
developer033

Selon la documentation sur le matériau Angular, les onglets Matériau génèrent un événement lors du changement de tabulation @Output() selectedTabChange: EventEmitter<MatTabChangeEvent>

Votre modèle:

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

Votre TypeScript:

import { MatTabChangeEvent } from '@angular/material';

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

"@ angular/material": "^ 6.2.1". Le moyen d'obtenir l'index de tabulation sélectionné en chargement (après le chargement du modèle) et lorsque le onglet est activé.

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>
5
Uliana Pavelko