событие keyup не поймано с помощью Angular 2 @HostListener

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

Вы испытали то же самое? (Скажите, если вам нужно больше информации). Благодаря

[править]
Я пытался ловить keyup события с помощью ElementRef и настройки моего обработчика событий к onkeyup свойству elementRef.nativeElement, не повезло

Answer 1

По какой-то причине Chrome propogates событие KeyUp для родителя, в то время как другие браузеры не делают. Вы можете напрямую подключиться к событию карты.

@ViewChild('myMap') 
map: ElementRef; 

constructor(private renderer: Renderer) {}; 

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

и в шаблоне:

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

Answer 2

Попробуйте слушать window:keyup или document:keyup случае вместо того, чтобы просто keyup.

Source