¿Puede *ngIf solo verificar las variables locales de la página o puedo verificar las variables globales?
Quiero hacer lo siguiente:
inicio.pagina.html
<div *ngIf="debugService.debugActive"></div>depuración.servicio.ts
debugActive: boolean = true; contructor() {} ...Pero ahora mismo, primero tengo que inicializar la variable en mi home.page.ts para usarla en el html:
home.page.ts
import { DebugService } from 'src/app/services/debug.service'; localDebugActive: boolean = false; constructor( private debugService: DebugService, ) {} ngOnInit() { this.localDebugActive = this.debugService.debugActive; }inicio.pagina.html
<div *ngIf="localDebugActive"></div>Esto significa un paso extra y llenar mis páginas enteras con variables locales. ¿Es posible sin volver a declararlo y usarlo directamente en el HTML?
La única forma en que un componente obtiene acceso a un servicio es inyectándolo, asegurando que la inyección de dependencia funcione correctamente. Los servicios no son realmente variables globales , como usted dice: no son simplemente "accesibles desde cualquier lugar". Necesitas usar DI.
Técnicamente , puede inyectar un servicio como una variable public en lugar de private y acceder a sus miembros directamente desde la plantilla. Sin embargo, esto generalmente se considera olor a código.
Puede exponer el servicio inyectado como público:
public debugService: DebugServiceY úsalo en tu plantilla. Aunque no me gusta mucho, pero para una visualización simple, eso sería suficiente.
Hay dos formas:
Hacer pública una instancia de servicio
constructor( public debugService: DebugService, ) {}Utilice un método (forma recomendada).
public isDebugActive() { return this.debugService.debugActive; } <div *ngIf="isDebugActive()"></div>