将AngularWeb组件EventEmitter收听到javascript中

在this article的帮助下，我使用了一个包含@Input和@Output的角度元素，创建了一个小型Web组件。

我能够将数据传递到@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对象中获取真/假值？

可以通过event.detail属性读取通过Web组件通过Output传输的数据：

const el = document.querySelector('facebook-card');
el.addEventListener('likeNotify',(event) => console.log(event.detail));


有关更多详细信息，您可以阅读here

  

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

我最近使用 Angular 11 用 Angular Elements 构建了一个小型 Web 组件。我无法使用 event.detail 从我的事件中获取数据，我发现数据似乎在 event.originalEvent.detail 上。所以它会是这样的：el.addEventListener('likeNotify',(event) => console.log(event.originalEvent.detail));