将Angular web组件EventEmitter监听到javascript中

Question

在本文的帮助下，我使用包括@Input和@Output的angular元素创建了一个小型web组件。

我可以将数据传递到@Input属性，但听@Output事件会让我抓狂，因为我不知道如何从回调事件参数中读取数据。

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

在纯javascript中，我听到了类似Notify的事件，如下所示：

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

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

Answer 1

通过web组件中的Output传输的数据可以从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"的调度事件。

Answer 2

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

Answer 3

如果您得到"无法读取未定义(读取"emit"("的属性；就像我的情况一样。接下来的几行可能会有所帮助。

if(this.itemSelectedEvent) this.itemSelectedEvent.emit(selectedItem);
else{
let thisHtml = ((this as any) as HTMLElement);
if(thisHtml?.dispatchEvent) thisHtml.dispatchEvent(new CustomEvent('onItemSelected', { detail: {selectedItem} }));
}