在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<string>();会导致名称为“ myClick”的调度事件。
我最近使用 Angular 11 用 Angular Elements 构建了一个小型 Web 组件。我无法使用 event.detail 从我的事件中获取数据，我发现数据似乎在 event.originalEvent.detail 上。所以它会是这样的：el.addEventListener('likeNotify',(event) => console.log(event.originalEvent.detail));