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) {
  ...
}

有关其他选项，请参见：

How to listen for mousemove event on Document object in Angular

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}!`);
     }
    }

Angular是否具有类似于window.addEventListener的功能？

2 个答案: