1

estoy realizando un proyecto con Angular y al ser nuevo tengo bastantes dudas/problemas. Estoy intentado definir una pantalla de inactividad cuando el usuario esté x segundos sin interactuar, la cual me funciona correctamente.

1.El problema es que la tengo definida con clics y he probado con el evento scroll pero no me lo detecta y salta igualmente.

Por una parte, el código HTML se encuentra en app.component.html:

<ion-grid *ngIf="showScreen">
 <ion-row>
  <ion-col>
   <div>
     <ion-img...>
     <ion-label> {{LANG_ACTIVITY_RESUME | translate}}
     <ion-label> {{LANG_ACTIVITY_TIMER | translate}}
     <div>
        <div (click)="resumeOrder()">
        {{LANG_ACTIVITY_RESUME | translate }}
     </div>
     <div>
        <div (click)="cancelOrder()">
        {{LANG_ACTIVITY_RESUME | translate }}
     </div>
    </div>
   </div>
  <ion-col>
  <ion-row>
<ion-grid>

introducir la descripción de la imagen aquí

Como se observa en la imagen, es un diseño sencillo que tiene 2 botones.

Por otra parte, el código Typescript de esta "pantalla" está en app.component.ts:

let showScreen: boolean = false; //Para que no se muestre
    
    userActivity;
    userInactive: Subject<any> = new Subject();
    
    constructor(){
     this.setTimeout();
     this.userInactive.subscribe(() => console.log('user has been inactive for 30s'));
    }
    
    //Aquí defino la función para que tras pasar los 30s y no se haya realizado ningún clic, establezca la propiedad a true y muestre la pantalla de inactividad.
    setTimeout() {
     this.userActivity = setTimeout(() => this.userInactive.next(this.showScreen = true), 30000);
    }

//Y en el HostListener tiene definida la propiedad para que limpie el contador cada  vez que se realiza un clic y vuelva a empezar el conteo.
@HostListener('window:click') refreshUserState() {
 clearTimeout(this.userActivity);
 this.setTimeout();
}

resumeOrder(){
 this.showScreen = false;
}

¿Como podría hacer para indicarle al HostListener que detecte clic y scroll? He probado varias formas pero no me funciona. La idea que tenía era tipo así, por si hay alguna forma parecida.

@HostListener('window:click'||'window:scroll')

2.Luego también tengo otra pregunta, una vez se muestra la pantalla, me gustaría poder añadir otro contador a raíz de esta para que una vez pasado los 30s con la pantalla de inactividad sin pulsar nada se haga un reset a la página, como si le dieras a refresh. He visto que en Angular se utilizan mucho los setInterval y clearInterval para este tipo de situaciones. ¿Sería buenas prácticas, o es mucho más profesional utilizar un asyc seguido de una promesa? Podría obtener un ejemplo por favor de como sería con alguno de los 2 casos para mi proyecto? El problema principal que tenía, es que creo que me definía un segundo Tiemout, pero luego me daba problemas porque al darle al botón de resumeOrder() me volvía a aparecer, no se resetaba bien el contador y me estaba volviendo loco xd.

3.Y por último, pero no menos importante, los textos los tengo definidos así porque poseo en una hoja el tema de las traducciones, pero me gustaría poder hacer un sencillo contador que muestre el conteo de 30s hacia atrás en vez de estar estático como está en la imagen. Como puedo mostrar ese conteo en el HTML?

Cualquier ayuda es agradecida de antemano. Gracias.

2
  • Te he respondido el punto 1 porque demuestra un avance en el tema. Los puntos 2 y 3 están basados en opiniones. Te sugiero crear preguntas individuales y colocar lo que has intentado y los problemas que has tenido.
    – Lobos
    Commented el 13 ago. a las 17:11
  • @Lobos al final probé tu método y me funcionaba pero finalmente lo hice con @HostListener por que me resultaba más cómodo para mi proyecto en específico.
    – ShadowZ
    Commented el 19 ago. a las 19:25

2 respuestas 2

1

Voy a responder como he solucionado los 2 último apartados por si en algún futuro alguna alma caritativa lo necesita:

  • Respecto al tema de que utilizar, prácticamente los métodos que hay son efectivos, ya sea la utilización de addEventListener o @HostListener.
//A. Caso con -> addEventListener
capturadorInactividad() {
    this.resetInactividad();

    this.ngZone.runOutsideAngular(() => {
      ['mousemove', 'click', 'keypress'].forEach(event => {
        window.addEventListener(event, () => this.resetInactividad());
      });
    });
  }

//B. Caso con -> HostListener
 ngOnInit() {
    this.inactivityService.capturadorInactividad()();
  }

  @HostListener('window:mousemove')
  @HostListener('window:click')
  @HostListener('window:keypress')
  handleUserActivity() {
    this.inactivityService.resetInactividad();
  }

Lo mismo con race, subscribe, setInterval, se Timeout... Al final es cada uno como se sienta más cómodo con sus métodos.

  • En cuanto al problema que tenía con el 2ndo contador, es que hay que tener en cuenta que no empiece antes que el de inactividad. Y respecto al tema del conteo regresivo mostrado por pantalla, en el servicio de inactividad he realizado lo siguiente a través de métodos como clearTimeout, clearInterval, next, run... Por ejemplo:
//Me defino 2 contadores.
  private temporizadorInactividad: any;
  private temporizadorCuentaRegresiva: any;

  private tiempoInactividad = 30000; // 30s
  private tiempoCuentaRegresiva = 30; // 30s

  //Variables de inactividad
  inactividadDetectada = new Subject<boolean>();
  valorCuentaRegresiva = new Subject<number>();
  
  //Su respectivo constructor
  constructor(private ngZone: NgZone) { }
 
 //Resetea primer contador
 capturadorInactividad() {
    this.reiniciarInactividad();
  }

  //Resetea la actividad del usuario
  reiniciarActividad() {
    this.inactividadDetectada.next(false);
    this.reiniciarInactividad();
  }

  //Reinicia el temporizador de inactividad
  private reiniciarInactividad() {
    clearTimeout(this.temporizadorInactividad);
    clearInterval(this.temporizadorCuentaRegresiva);

    // Inicia un nuevo temporizador de inactividad
    this.temporizadorInactividad = setTimeout(() => {
      this.ngZone.run(() => {
        this.inactividadDetectada.next(true);
        this.iniciarCuentaRegresiva();
      });
    }, this.tiempoInactividad);
  }


  //Inicia la cuenta regresiva cuando se detecta inactividad
  private iniciarCuentaRegresiva() {
    let tiempoRestante = this.tiempoCuentaRegresiva;
    this.temporizadorCuentaRegresiva = setInterval(() => {
      this.ngZone.run(() => {
        tiempoRestante--;
        this.valorCuentaRegresiva.next(tiempoRestante);
        
        //Si el tiempo de la pantalla de inactividad se acaba -> refresh
        if (tiempoRestante <= 0) {
          clearInterval(this.temporizadorCuentaRegresiva);
          window.location.reload();
        }
      });
    }, 1000);
  }
}
0

Puedes usar observables y concatenar los diferentes eventos que desees escuchar:

export class App {

  timeout = setTimeout(() => alert('dialogo'), 10_000) 

  ngOnInit(){
    race(
      fromEvent(document, 'scroll'),
      fromEvent(document, 'click')
    ).subscribe(() => {
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => alert('dialogo'), 10_000)
    })
    
  }
}

fromEvent crea un observable desde un evento, en el ejemplo se han usado scroll y click, se podrían agregar más como keydown para contar también con las pulsaciones de tecla.

race es un operador que agrupa los observables y devuelve el valor del observalbe que emita primero.

Por último en el subscribe hay proceso simple que se encarga de reiniciar el timeout cuando hay un evento del usuario.

Te dejo un ejemplo en vivo.

1
  • muchas gracias por la respuesta, entendí la funcionabilidad de que hay como un evento que se lanza para escuchar interacciones y luego un subscribe que ejecuta con su respectivo timeout. Investigué sobre el tema y también encontré que se puede realizar con setTimeout y setInterval y sus respectivos limpiadores.
    – ShadowZ
    Commented el 19 ago. a las 19:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.