Archivo de directiva: estoy tratando de hacer que si mi contador supera los dos, debería detener el evento o keyUp para reflejar, pero no funciona. ¿Alguien me puede ayudar en esto?
import { Component, HostListener, HostBinding } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; export enum KeyCodes { LEFT = 37, RIGHT = 39, } @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { counter: number = 0; fragment: string; classBorder: string = ''; constructor(private _route: ActivatedRoute) { // this.fragment = _route.snapshot.fragment; } @HostListener('document:keyup', ['$event']) KeyUpEvent(event: KeyboardEvent) { if (event.keyCode == KeyCodes.LEFT) this.counter--; if (event.keyCode == KeyCodes.RIGHT) this.counter++; if (this.counter > 2) { event.preventDefault(); event.stopPropagation(); } } }Es posible que desee crear un observable en OnInit para el evento y luego canalizarlo para que solo tome los primeros 2 valores emitidos:
export class AppComponent implements OnInit { ngOnInit() { fromEvent(document, 'keydown').pipe( filter((e: KeyboardEvent) => e.keyCode === KeyCodes.LEFT), take(2), ).subscribe( (x: KeyboardEvent) => console.log(x) ) } } preventDefault() solo deshabilita los comportamientos predeterminados del navegador, se usa comúnmente para evitar la actualización en ciertos eventos y cosas por el estilo.
También puede usar takeUntil() para esperar a que se active otro observable, para una lógica un poco más compleja como la suya.
counter = 0 countSubject = new Subject get count$() { return this.countSubject.asObservable() } ngOnInit() { fromEvent(document, 'keydown').pipe( tap((e: KeyboardEvent) => { if (e.keyCode === KeyCodes.LEFT) { this.countSubject.next(++this.counter) } if (e.keyCode === KeyCodes.RIGHT) { this.countSubject.next(--this.counter) } }), takeUntil(this.count$.pipe( filter((v:number) => v === 2) )), ).subscribe( (x: KeyboardEvent) => console.log(x) ) }Hice un ejemplo de trabajo en Stackblitz para ti.
El método stopPropagation() se usa para detener la propagación del evento del elemento secundario al elemento principal y, en este caso, está escuchando el evento keyup del documento. (Es como escuchar eventos de todo el cuerpo del documento).
Tal vez debería cambiar el destino desde el que escucha el evento keyup.
Aquí hay un ejemplo muy simple de stopPropagation() en acción con el evento keyup.
No necesita evitar nada, solo use la lógica correcta.
Prueba este:
KeyUpEvent(event: KeyboardEvent) { if (event.keyCode == KeyCodes.LEFT) this.counter--; if (event.keyCode == KeyCodes.RIGHT) this.counter += this.counter < 2; }