Por ejemplo, tengo un componente A y estaba en la pestaña Segunda y luego navegué a otra página que es el Componente B, digamos la página 1 y luego navegué de regreso al Componente A, luego debería estar en la última pestaña seleccionada para ejemplo aquí Segunda pestaña.
Entonces, cuando navego hacia atrás, se debe seleccionar la pestaña que seleccioné antes de navegar a otra página, por ejemplo, aquí seleccioné Segunda pestaña y luego navego a otra página cuando navego hacia atrás Se debe seleccionar la segunda pestaña ya que esto es lo que seleccioné antes Navegué a otras páginas.
Gracias.
ingrese la descripción de la imagen aquí
¿Alguien tiene una idea de cómo implementar esto en angular? .
#code al navegar a otra página - Componente A
navigateToPage1() { this._router.navigate(['page1']); }#código para navegar hacia atrás - Componente B
navigateBackToPage() { this._router.navigate(['page0']); }#código para verificar las pestañas seleccionadas en el Componente A
tabChanged(tabChangeEvent: MatTabChangeEvent): void { this.currentTab = tabChangeEvent.index; if(this.currentTab !== 1) { this.pageHeaderTitleData.title.primary = "Users" this._pageEventMyList(); } this.pageHeaderTitleData.title.primary = "Teams" }captura de pantalla de pestañas
#Mi pestaña código html Componente A
<mat-tab-group #tabGroup (selectedTabChange)="tabChanged($event)"> <mat-tab label="First"> ... </mat-tab> <mat-tab label="Second"> ... </mat-tab> <mat-tab label="Third"> ... </mat-tab> </mat-tab-group>Podría usar un servicio compartido para almacenar la pestaña seleccionada. Llamémoslo UIStateService :
@Injectable({ providedIn: 'root' }) export class UIStateService { pageOneSelectedTab = 0; pageTwoSelectedTab = 0; constructor() {} }Úselo en el componente de su página:
selectedIndex = 0; constructor(private uiStateService: UIStateService) { } tabChanged(event: MatTabChangeEvent) { this.uiStateService.pageOneSelectedTab = event.index; } ngOnInit() { this.selectedIndex = this.uiStateService.pageOneSelectedTab; }y en el HTML de tu página:
<mat-tab-group [(selectedIndex)]="selectedIndex" (selectedTabChange)="tabChanged($event)">Consulte este ejemplo de Stackblitz basado en su código: https://angular-ivy-evbm9h.stackblitz.io