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>
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.
@HostListener
por que me resultaba más cómodo para mi proyecto en específico.