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!