将 Angular Web 组件 EventEmitter 监听到 javascript 中

Question

在本文的帮助下，我使用包含@Input和 的angular 元素创建了一个小型 Web 组件@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 对象中检索真/假值？

Answer 1

通过 Web 组件中的输出传输的数据可以从 event.detail属性中：

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

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

有关更多详细信息，您可以在这里阅读

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