¿Usas la API de visibilidad en Angular?

Marina, miembro de este gran equipo de trabajo, nos ha hecho el favor de redactar esta reseña porque conoce perfectamente el tema.

Solución:

no se porque dices document.hidden no funciona en el detector de eventos, ya que funciona bien para mí:

document.addEventListener(
  "visibilitychange"
  , () =>  
    if (document.hidden)  
      console.log("document is hidden");
    else
      console.log("document is showing");
    
  
);

Si tiene algún tipo de error, ¿podría abrir las herramientas de desarrollo (F12) e inspeccionar la consola? ¿Tal vez interrumpir el error y ver qué está mal?

 @Component( 
        selector : 'app-root',
        templateUrl : './app.component.html',
        styleUrls : [ './app.component.scss' ]
     )

    export class AppComponent implements OnDestroy, OnInit  
    constructor() 
    

         @HostListener('document:visibilitychange', ['$event'])
          visibilitychange() 
            this.checkHiddenDocument();
          

            checkHiddenDocument()
            if (document.hidden)
            this.pauseVideo();
             else 
            this.playVideo();
            

        

       ngOnDestroy(): void 
        
    

Puede usar un hostlistener para el eventoibilityChange. Luego revisa el estado del documento para hacer un método u otros.

Si trabaja con Angular 4+, puede usar Module angular-page-visibility (https://www.npmjs.com/package/angular-page-visibility).

Aquí hay un ejemplo con una clase de componente:

@Component( 
    selector : 'app-root',
    templateUrl : './app.component.html',
    styleUrls : [ './app.component.scss' ]
 )
export class AppComponent implements OnDestroy, OnInit 
    title = 'app';

    constructor() 
    

    ngOnInit(): void 
    

    @OnPageVisible()
    logWhenPageVisible(): void 
        console.log( 'OnPageVisible' );
        console.log( 'visible' );
    

    @OnPageHidden()
    logWhenPageHidden(): void 
        console.log( 'OnPageHidden' );
        console.log( 'hidden' );
    

    @OnPageVisibilityChange()
    logWhenPageVisibilityChange( isPageVisible: boolean ): void 
        console.log( 'OnPageVisibilityChange' );
        if ( isPageVisible ) 
            console.log( 'visible' );
         else 
            console.log( 'hidden' );
        
    

    ngOnDestroy(): void 
    

Reseñas y valoraciones

Recuerda que puedes recomendar esta sección si te fue útil.

---

---

Utiliza Nuestro Buscador