监听 Angular web component EventEmitter 变成 javascript

Question

我在 this article 的帮助下使用 angular 元素创建了一个小型 Web 组件，其中包括 @Input 和 @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 对象中检索 true/false 值？

Answer 1

通过网络组件中的输出传输的数据可以从event.detail 属性:

中读取

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

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

详情请阅读here

Component outputs are dispatched as HTML Custom Events, with the name of the custom event matching the output name. For example, for a component with @Output() valueChanged = new EventEmitter(), the corresponding custom element will dispatch events with the name "valueChanged", and the emitted data will be stored on the event’s detail property. If you provide an alias, that value is used; for example, @Output('myClick') clicks = new EventEmitter<string>(); results in dispatch events with the name "myClick".

Answer 2

我最近使用 Angular 11 使用 Angular 元素构建了一个小型 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} }));
}

监听 Angular web component EventEmitter 变成 javascript

Listen to Angular web component EventEmitter into javascript

javascript

web-component

angular

angular-event-emitter

angular-elements