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

這可以使用下面的代碼使用selectedIndex輸入變量來實現

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

你的打字稿代碼將是

@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;
  }

也在插件中更新。

現場演示

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創建TwoComponent和ThreeComponent 。

希望這可以幫助！