angular - link - mat-tab-nav-bar

md-tabs Usar código para ir a una pestaña en el diseño de material angular 2

Question

Estoy usando Angular2 para crear una aplicación que necesito para navegar entre pestañas usando un botón presente dentro de las pestañas.

mi html es como el siguiente:

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

Entonces, cuando hago clic en navegar a tres, debería llevarme al nombre de la pestaña tres

Estoy usando el diseño de material de Angular2 para este ejemplo. ¿Alguien puede saber para resolver este problema?

Gracias por adelantado

Answer 1

Esto se puede lograr usando la variable de entrada selectedIndex utilizando el siguiente código

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

y su código mecanografiado será

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

}

Actualización 1: Basado en comentarios.

Puede usar el método selectedIndexChange para corregir ese error como se muestra a continuación

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

</md-tab-group>

y tu código tendrá

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

Actualizado en el plunk también.

DEMO EN VIVO

Answer 2

quieres usar el Enrutador Angular .

prueba esto:

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

dentro de tu clase de componente

constructor(private router: Router) {}

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

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

no olvide importar el enrutador en su componente

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

en tu módulo

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)
],

y por supuesto crear TwoComponent y ThreeComponent .

¡Espero que esto ayude!