Cómo obtener el valor de una variable que se establece en la barra de navegación para usar en otro componente?

Tengo una barra de navegación que utiliza una barra de conmutación (similar a un botón de alternancia) que está predefinida como “Todos los gatos de la familia”. Cuando la barra de conmutación está apagada, muestra la etiqueta predefinida “Todos los gatos de la familia” al lado y muestra una tabla de todos los gatos de la familia. Esto funciona bien y el backend/datos funcionan como se espera.

Sin embargo, cuando la barra de conmutación está encendida (es decir, se hace clic en ella), quiero que la etiqueta de la barra de conmutación diga “Mis gatos” y muestre la tabla que muestra solo mis gatos. Realmente no entiendo cómo obtener el valor del valor booleano de “allCatsTable” porque ese valor se establece en la barra de navegación. ¿Puede alguien ayudar a un principiante a aprender cómo hacer esto?

Omití parte del código para que mi pregunta sea más clara.

cats.component.ts

export class CatComponent implements OnInit { tableName: string; gridPage: string; constructor(private router:Router, public tableRefineHelper: tableRefineHelper) { if (isAllCatsTable) {. <--- ¿cómo obtengo este valor de la barra de navegación? this.tableName = workloadName.allCats; this.gridPage = 'allCats' } else { this.gridPage = 'myCats'; this.workloadName = workloadName.myCats; } } ngOnInit(): void { } } actionbar.component.html ```html <div class="actionbar"> <div *ngif="isAllCatsTable || isMyCatsTable"> <igx-switch labelposition="after" (change)="onSwitchClick($event)" checked="false">{{switchName}}</igx-switch> </div> </div> </code></pre> actionbar.component.ts ```typescript export class ActionbarComponent implements OnInit, OnChanges { isAllCatsTable: boolean; isMyCatsTable: boolean; switchName: string = "Todos los gatos de la familia"; constructor() { } public onSwitchClick(event) { if (event.checked) { this.switchName = "Todos los gatos de la familia"; } else { this.switchName = "Mis gatos"; } } }```

davy.ai

July 13, 2023 at 3:35 pm

Para obtener el valor de isAllCatsTable de la navBar con el fin de cambiar las propiedades tableName y gridPage en CatComponent, puedes utilizar un servicio compartido.

Aquí tienes un ejemplo:

Crea un servicio compartido llamado NavbarService (puedes importarlo tanto en actionbar.component.ts como en cat.component.ts):

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
 providedIn: 'root',
})
export class NavbarService {
 private isAllCatsTableSubject = new BehaviorSubject<boolean>(true);
 public isAllCatsTable$ = this.isAllCatsTableSubject.asObservable();

 setIsAllCatsTable(value: boolean) {
   this.isAllCatsTableSubject.next(value);
 }
}

En actionbar.component.ts, inyecta el servicio NavbarService y actualiza la propiedad isAllCatsTable en onSwitchClick:

export class ActionbarComponent implements OnInit {
 isAllCatsTable: boolean;
 switchName: string = 'All Cats in the Family';

 constructor(private navbarService: NavbarService) {}

 ngOnInit(): void {
   // Suscríbete al observable isAllCatsTable$ de NavbarService
   // y actualiza la propiedad isAllCatsTable en consecuencia
   this.navbarService.isAllCatsTable$.subscribe(
     (isAllCatsTable) => (this.isAllCatsTable = isAllCatsTable)
   );
 }

 onSwitchClick(event) {
   if (event.checked) {
     this.switchName = 'My Cats';
     this.navbarService.setIsAllCatsTable(false); // actualiza el servicio con el nuevo valor
   } else {
     this.switchName = 'All Cats in the Family';
     this.navbarService.setIsAllCatsTable(true); // actualiza el servicio con el nuevo valor
   }
 }
}

En cat.component.ts, inyecta el servicio NavbarService y utiliza el valor de isAllCatsTable$ para cambiar tableName y gridPage:

export class CatComponent implements OnInit {
 tableName: string;
 gridPage: string;

 constructor(
   private router: Router,
   public tableRefineHelper: tableRefineHelper,
   private navbarService: NavbarService // inyecta el servicio
 ) {
   this.navbarService.isAllCatsTable$.subscribe((isAllCatsTable) => {
     if (isAllCatsTable) {
       this.tableName = workloadName.allCats;
       this.gridPage = 'allCats';
     } else {
       this.tableName = workloadName.myCats;
       this.gridPage = 'myCats';
     }
   });
 }

 ngOnInit(): void {}
}

¡Espero que esto te ayude! Avísame si tienes alguna pregunta.

es.davy.ai

¿Tienes una pregunta?

Cómo obtener el valor de una variable que se establece en la barra de navegación para usar en otro componente?

Answer

davy.ai