将 Angular Web 组件 EventEmitter 监听到 javascript

我在以下工具的帮助下创建了一个小型网络组件本文 https://medium.com/@IMM9O/web-components-with-angular-d0205c9db08f使用角度元素，其中包括@Input and @Output.

我能够将数据传递给@Input财产但听@Output事件让我发疯，因为我无法弄清楚如何从回调事件参数中读取数据。

//Emitting the boolean data
likeEvent() { 
    this.likeNotify.emit(true);
}

在纯 javascript 中，我正在监听 likeNotify 事件，如下所示：

const el = document.querySelector('facebook-card');
      el.addEventListener('likeNotify', e => {
        console.log(e.currentTarget.data); // Not working
      });

那么如何从发射器传递的 e 对象中检索 true/false 值？

通过 Web 组件中的 Output 传输的数据可以从event.detail https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail财产：

const el = document.querySelector('facebook-card');

el.addEventListener('likeNotify', (event) => console.log(event.detail));

欲了解更多详细信息，您可以阅读here https://angular.io/guide/elements#mapping

组件输出作为 HTML 自定义事件进行分派，自定义事件的名称与输出名称匹配。例如，对于具有@Output() valueChanged = new EventEmitter()，相应的自定义元素将调度名为“valueChanged”的事件，并且发出的数据将存储在事件的详细属性中。如果您提供别名，则使用该值；例如，@Output('myClick') clicks = new EventEmitter<string>();导致名为“myClick”的调度事件。