Angular 2 @HostListener 未捕获 keyup 事件

Question

我有一个 google 地图，可以捕获 keyup 事件。 我的组件是 google maps div 的父组件。 它适用于 Chrome，不适用于 Firefox 或 IE（未使用 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.');
  }
};

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

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

Answer 1

尝试收听window:keyup或document:keyup事件而不是简单的keyup 。

来源

Answer 2

有时window:keyup事件无法与@HostListener一起@HostListener ，尽管它在同一应用程序中的其他情况下也可以使用。 尝试改用document:keyup事件。

Answer 3

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

@ViewChild('myMap')
map: ElementRef;

constructor(private renderer: Renderer) {};

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

并在模板中：

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