Angular 2 @HostListener 未捕获 keyup 事件

Question

I have a google maps that should capture keyup events. My component is a parent of the google maps div. It works fine with Chrome, it does not with Firefox or IE (not tested wtith Edge).

My component:

@Component({
  selector: 'dashboard',
  templateUrl: 'dashboard.component.html',
  styleUrls:  ['dashboard.component.css'],
  host: {
    '[attr.tabindex]': '-1'
  },
  providers: []
})
export class DashboardComponent implements OnInit{

  /* some functions and other stuff here 
  * ...
  */

  @HostListener('keyup', ['$event']) keyup(e) {
    console.log('This will be called with Chrome, not with the others.');
  }
};

Have you experienced the same ? (Tell me if you need more info). Thanks

[edit]
I've tried catching the keyup events by using ElementRef and setting my event handler to the onkeyup property of the elementRef.nativeElement , with no luck

Answer 1

Try listening to the window:keyup or document:keyup event instead of simply keyup .

Source

Answer 2

Sometimes the window:keyup event fails to work with @HostListener , though it works in other cases in the same application. Try to use the document:keyup event instead.

Answer 3

For some reason Chrome propogates the keyup event to the parent while other browsers dont. You can try subscribing to the map's event directly.

@ViewChild('myMap')
map: ElementRef;

constructor(private renderer: Renderer) {};

ngOnInit() {
    this.renderer.listen(this.map.nativeElement, 'keyup', (event) => {
        // ...
    });
}

and in the template:

<div #myMap>...</div>