将Angular web组件EventEmitter转换为javascript

我使用Angle元素创建了一个小型web组件，其中包括

@Input

和

@Output

我能够将数据传递给

@Input

属性，但收听

@Output

事件让我发疯，因为我无法理解如何从回调事件参数读取数据

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

在纯javascript中，我正在听类似这样的Likotify事件：

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

---

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

通过web组件中的输出传输的数据可以从属性中读取：

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

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

有关更多详细信息，请阅读

组件输出作为HTML自定义事件进行调度，自定义事件的名称与输出名称匹配。例如，对于具有

@Output（）valueChanged=new EventEmitter（）

的组件，相应的自定义元素将调度名为“valueChanged”的事件，并且发出的数据将存储在事件的detail属性中。如果提供别名，则使用该值；例如，

@Output（'myClick'）单击=neweventemitter（）导致名为“myClick”的分派事件

我最近使用Angular 11构建了一个带有Angular元素的小型web组件。我无法使用event.detail从事件中获取数据，我发现数据似乎位于event.originalEvent.detail上。所以它可能是这样的：
el.addEventListener（'likotify'，（event）=>console.log（event.originalEvent.detail））
这不是角度的方式。。。我假设您在html的某个地方包含了发射组件的
选择器
？您可以在那里连接到输出。例如：
@Carsten这些是web组件，与您想象的不同。无论如何，据我所知，事件值本身应该是布尔值。所以你可以做
console.log（e）
，它应该记录
true
@PierreDuc哦，哎哟。我的错。我应该开始读：）@Carsten没关系：）我也错了，显然是
事件data@Carsten，
event.detail
是我一直在寻找的，非常有魅力。