角度2私が持っている

Question

を変更します。

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

私は特定のタブがクリックされたイベントをキャッチし、私のコンポーネント内にこの関数を呼び出す必要があります。

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

私はプログラミングにおいて、特にAngular 2では非常に新しいです。私はアドバイスに感謝します。

Answer 1

：

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にこのような何かをそのイベントを消費します。チェック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

から@Outputというイベントを発行する必要があります。ような何か：あなたは(selectedTabChange)イベントを使用することができます

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