Как остановить событие keydown рендерера для передачи другим компонентам в Angular?

Question

Я пытаюсь прослушать нажатие клавиши для определенного ключа в Angular 6. Я могу получить событие keydown, но оно также передается другим службам / компонентам в моем коде, которые прослушивают нажатие клавиши.

Я читал, что это понятие называется пузырянием, и я уже пытался остановить его, но оно не сработало.

Ниже моя реализация:

this.renderer.listen(document, 'keydown', event => { 
      if (event.altkey) { 
            console.log('Alt key pressed');
            event.stopPropagation();
            event.preventDefault();
      } }

Я могу перехватить клавишу 'Alt' с помощью этого кода, но она также отправляется другим слушателям.

Answer 1

stopPropagation

предотвратит выполнение любых родительских обработчиков.

stopImmediatePropagation

предотвратит выполнение любых родительских обработчиков, а также любых других обработчиков.

@HostListener('keydown', ['$event'])
open(event: KeyboardEvent) {
     if (event.altkey) { 
        console.log('Alt key pressed');
        // Changed below line of code.
        event.stopImmediatePropagation ();
        event.preventDefault();
      }
}

Answer 2

Слушатель в декораторе компонента ограничен этим компонентом. Возможно, вы захотите заменить слушателей в других ваших компонентах этим.

@Component({
    selector: 'component-selector',
    templateUrl: './component.html',
    styleUrls: ['./component.css'],
    host: {
        "(document:keydown)": "eventHandlingFunction($event)"
    }
})
export class SampleComponent{
    eventHandlingFunction(event:KeyboardEvent){
        //listen and prevent default
    }
}

Answer 3

используйте HostListener для прослушивания

    @HostListener('keydown', ['$event'])
    open(event: KeyboardEvent) {
         if (event.altkey) { 
            console.log('Alt key pressed');
            event.stopPropagation();
            event.preventDefault();
        }
    }