Question

我正在尝试在Angular 6中侦听特定键的keydown。我能够获取keydown事件，但它也传递给我的代码中正在侦听keydown的其他服务/组件。

我读到这个概念叫做冒泡，我已经尝试停止它了，但是没有用。

以下是我的实现：

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

我可以通过此代码捕获“ Alt”键，但它也会发送给其他侦听器。

Answer 1

组件装饰器中的侦听器仅限于该组件。您可能希望以此替换其他组件中的侦听器。

@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 2

使用private lazy var popupView: PopUpView = { let popUpView = UINib(nibName: "PopUpView", bundle: nil).instantiate(withOwner: nil, options: nil).first as! PopUpView popUpView.delegate = self return popUpView }()收听

HostListener

Answer 3

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();
      }
}

如何停止渲染器keydown事件传递给Angular中的其他组件？

3 个答案: