md-tabs使用代碼轉到角度2材質設計中的選項卡

Question

我正在使用Angular2創建一個應用程序，我需要使用標籤內存在的按鈕在標籤之間導航。

我的HTML是以下幾點：

<md-tab-group> 
<md-tab label="one"> 
    <button md-raised-button>Navigate to Two</button> 
    <button md-raised-button>Navigate to Three</button> 
</md-tab label> 
<md-tab label="two"> 
</md-tab label> 
<md-tab label="three"> 
</md-tab label> 
</md-tab-group> 

所以，當我點擊導航到三個應該帶我去的標籤列出三個

我使用Angular2材料設計，在這個例子中任何人都可以知道解決這個問題。

在此先感謝

Answer 1

這可以通過使用下面的代碼

<md-tab-group [selectedIndex]="selectedIndex"> 
    <md-tab label="Tab 1">Content 1 
    <button (click)="clickMe()"> click me to go to tab 2 </button> 
    </md-tab> 
    <md-tab label="Tab 2">Content 2</md-tab> 
</md-tab-group> 

和您的打字稿代碼的selectedIndex輸入變量將是

@Component({ 
    selector: 'tabs-sample', 
    templateUrl: './tabsSample.html', 
}) 
export class TabsSample { 
    selectedIndex:number=0; 
    clickMe(){ 
    this.selectedIndex=1; 
    } 

} 

更新1來實現。

可以使用selectedIndexChange方法來修復錯誤如下

<md-tab-group (selectedIndexChange)="selectedIndexChange($event)" 
       [selectedIndex]="selectedIndex"> 

</md-tab-group> 

，你的代碼將有

selectedIndexChange(val :number){ 
    this.selectedIndex=val; 
    } 

在普拉克更新。

LIVE DEMO

Answer 2

要使用Angular Router。

試試這個：在您的HTML

<md-tab-group> 
<md-tab label="one"> 
    <button md-raised-button (click)="goToTwo()">Navigate to Two</button> 
    <button md-raised-button (click)="goToThree()">Navigate to Three</button> 
</md-tab label> 
</md-tab-group> 
<router-outlet></router-outlet> 

您的組件類中

constructor(private router: Router) {} 

goToTwo() { 
    this.router.navigate(['two']) 
} 

goToThree(){ 
    this.router.navigate(['three']) 
} 

不要忘記導入路由器在組件

import { Router } from '@angular/router';

你的模塊

import { RouterModule, Routes } from '@angular/router'; 
export const appRoutes: Routes = [ 
    { path: '', 
    redirectTo: '/two', 
    pathMatch: 'full' 
    }, 
    { path: 'two', component: TwoComponent, 
    }, 
    { path: 'three', component: ThreeComponent } 
]; 
... 

imports: [ 
    ..., 
    RouterModule.forRoot(appRoutes) 
], 

當然在創造TwoComponent和ThreeComponent。

希望這會有所幫助！基於評論：