Angular 2 Wie „watch“ für Reiter ändern

Question

ich habe:

<md-tab-group color="primary"> 
    <md-tab label="Проэкты"> 
    <h1>Some tab content</h1> 
    </md-tab> 
    <md-tab label="Обучалка"> 
    <h1>Some more tab content</h1> 
    <p>...</p> 
    </md-tab> 
</md-tab-group> 

Ich brauche ein Ereignis zu fangen, wenn eine bestimmte Registerkarte geklickt wird und diese Funktion in meiner Komponente zu nennen:

onLinkClick() { 
    this.router.navigate(['contacts']); 
} 

Ich bin sehr neu in der Programmierung, besonders in Angular 2. Ich werde für jeden Rat dankbar sein.

Answer 1

Sie die (selectedTabChange)Ereignis nutzen könnten. Überprüfen Sie Material2#tabs.

Vorlage:

<mat-tab-group color="primary" (selectedTabChange)="onLinkClick($event)"> 
    ... 
</mat-tab-group> 

Komponente:

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

// ... 

onLinkClick(event: MatTabChangeEvent) { 
    console.log('event => ', event); 
    console.log('index => ', event.index); 
    console.log('tab => ', event.tab); 

    this.router.navigate(['contacts']); 
} 

Answer 2

Sie müssen das Ereignis als @Output von Ihnen md-tab Komponente veröffentlichen. Etwas wie:

import { EventEmitter, Output, Input, Component } from '@angular/core'; 

@Component({ 
    selector: 'tab', 
    template: ` 
     <button (click)="clicked()">{{ name }}</button> 
    `, 
    styles: [` 
    `] 
}) 
export class TabComponent { 
    @Input() name = 'replaceme'; 
    @Output() tabClicked = new EventEmitter<null>(); 

    clicked() { 
     this.tabClicked.emit(); 
    } 
} 

Dann verbrauchen Sie dieses Ereignis in der md-tab-group, etwa so:

import { Component }   from '@angular/core'; 

@Component({ 
    selector: 'tab-group', 
    template: ` 
     <!--<tab *ngFor="let tab of tabs" [name]="tab"></tab>--> 
     <tab *ngFor="let tab of tabs" [name]="tab" (tabClicked)="tabChanged(tab)"></tab> 
     <div> 
     {{ selectedTab }} 
     </div> 
    `, 
    styles: [` 
    `] 
}) 
export class TabGroupComponent { 
    private tabs = ['foo', 'bar']; 
    private selectedTab = this.tabs[0]; 

    onInit() { 
     this.selectedTab = this.tabs[0]; 
    } 

    tabChanged(tab) { 
     this.selectedTab = tab; 
    } 
} 

Heres a working plunker that demonstrates the concept