Angular 2 @HostListener未捕获keyup事件

Question

我有一个应该捕获键入事件的Google地图。我的组件是google maps div的父级。它可以在Chrome上正常运行，不能在Firefox或IE（未经测试的wtith Edge）上运行。

我的组件：

@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.');
  }
};

你经历过同样的经历吗？（如果需要更多信息，请告诉我）。谢谢

[edit]
我尝试keyup通过使用ElementRef并将事件处理程序设置为的onkeyup属性来捕获事件，但是elementRef.nativeElement没有运气

Answer 1

尝试听window:keyupor document:keyup事件，而不是简单地听keyup。

资源

Answer 2

由于某种原因，Chrome 将 keyup 事件传播到父浏览器，而其他浏览器则不然。您可以尝试直接订阅地图的事件。

@ViewChild('myMap')
map: ElementRef;

constructor(private renderer: Renderer) {};

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

并在模板中：

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