在stencilJS中侦听全局窗口事件

Posted 2021-05-03

假设我在应用程序的某个地方有这样的东西：

var event = new Event('build');
window.dispatchEvent(event);

在stencilJS文档中，他们说你可以听这样的全球事件：

@Listen('body:scroll')
handleScroll(ev) {
    console.log('the body was scrolled', ev);
}

但我找不到方法来监听窗口上发出的事件，就像我可以用普通的javascript听它：

window.addEventListener('build', function (e) { 
  console.log('Event happened',e);
}, false);

有任何想法吗？

答案

我尝试过模板文档示例，但它没有用。然后我将'body'更改为'window'，现在我在控制台中看到了scroll事件。

@Listen('window:scroll')
handleScroll(ev) {
  console.log('the body was scrolled', ev);
}

另一答案

好的，所以我做了一个在这个blog post中收听组件发布事件的例子。

但这是一般的解决方案。我会使用Stencils Event Emitter并从组件中发出。让我们说你这样做并从你的组件中发出一个名为fancyEvent的事件......

@Event() fancyEvent: EventEmitter;
...
this.fancyEvent.emit($event);

要在窗口上监听此事件（即在index.js中），您可以执行以下两项操作之一。如果你有一个诸如打字稿之类的转换器，你可以这样听

@Listen('fancyEvent')
function doSomethingFancy() {}

但是在vanilla es5风格的javascript中你也可以听这些自定义事件。

window.addEventListener('fancyEvent', function(e) {})