Angular 有类似 window.addEventListener 的功能吗？

Question

我有一个像下面这样的 JavaScript 函数。

window.addEventListener('message', function(event) {
                document.getElementById('mytoken').value = JSON.parse(event.data);

                var token = JSON.parse(event.data);      

                alert('Received message ' + token.message);
                var mytoken = document.getElementById('mytoken');
                mytoken.value = token.message;
                }, false);

我想在 Angular 5 中使用这个脚本，当然，我正在尝试为 Angular 5 找到正确的解决方案。谢谢

Answer 1

在 Angular 中，您可以HostListener在某些组件中使用，例如：

@HostListener('window:message', ['$event'])
onMessage(event) {
  ...
}

有关替代选项，请参阅：

• 如何在 Angular 中监听 Document 对象上的 mousemove 事件

Answer 2

使用 HostListener 装饰器

就我个人而言，我更喜欢这样做

    import {HostListener, KeyboardEvent} from '@angular/core';

    @Component({...})
    export class MyComponent {

    @HostListener('document:keyup', ['$event'])
    onKeyUp(ev:KeyboardEvent) {
      // do something meaningful with it
      console.log(`The user just pressed ${ev.key}!`);
     }
    }