Angular:上下文菜单打开时检测特定按键
Angular: Detect particular key press when context menu open
在我的 Angular 应用程序中,我实现了一个上下文菜单,并希望在按下特定键(up
或 down
)时触发一个事件。我试过将 (keydown)="onKeydown($event)
放在我的外部 div
中,但它没有检测到任何按键。如果我将 (mouseover)="onKey()"
放在同一个 div 中,它 会 检测到 mouseover
事件。有谁知道如何解决这个问题?
你可以这样试试
import { Inject, OnDestroy, OnInit } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { fromEvent } from 'rxjs/internal/observable/fromEvent';
import { Subscription } from 'rxjs/internal/Subscription';
export class Component implements OnInit, OnDestroy {
subscription: Subscription;
// and in your constructor import documnet
constructor(@Inject(DOCUMENT) private document: Document) {}
// and in some lificicle hook or in constructor
ngOnInit() {
this.subscription = fromEvent(this.document, 'keydown').subscribe(event => {
// do some thing
})
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
希望对你有所帮助。
在我的 Angular 应用程序中,我实现了一个上下文菜单,并希望在按下特定键(up
或 down
)时触发一个事件。我试过将 (keydown)="onKeydown($event)
放在我的外部 div
中,但它没有检测到任何按键。如果我将 (mouseover)="onKey()"
放在同一个 div 中,它 会 检测到 mouseover
事件。有谁知道如何解决这个问题?
你可以这样试试
import { Inject, OnDestroy, OnInit } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { fromEvent } from 'rxjs/internal/observable/fromEvent';
import { Subscription } from 'rxjs/internal/Subscription';
export class Component implements OnInit, OnDestroy {
subscription: Subscription;
// and in your constructor import documnet
constructor(@Inject(DOCUMENT) private document: Document) {}
// and in some lificicle hook or in constructor
ngOnInit() {
this.subscription = fromEvent(this.document, 'keydown').subscribe(event => {
// do some thing
})
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
希望对你有所帮助。