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。

希望这会有所帮助！基于评论：