कोणीय 2 "घड़ी" के लिए टैब में परिवर्तन के लिए

Question

मेरे पास है:

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

:

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

मैं एक घटना है जब एक विशिष्ट टैब क्लिक किया जाता है को पकड़ने और मेरे घटक के अंदर इस समारोह कॉल करने की आवश्यकता मैं प्रोग्रामिंग में बहुत नया हूं, खासकर कोणीय 2 में। मैं किसी भी सलाह के लिए आभारी रहूंगा।

Answer 1

आप (selectedTabChange)घटना इस्तेमाल कर सकते हैं। Material2#tabs देखें।

टेम्पलेट:

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

घटक:

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

आपको md-tab घटक से ईवेंट को @Output के रूप में प्रकाशित करने की आवश्यकता है। की तरह कुछ:

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

तो फिर तुम इस तरह md-tab-group में है कि घटना है, कुछ का उपभोग:

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