5

在本文的帮助下，我使用 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 对象中检索真/假值呢？

4

2 回答 2

14

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

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

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

有关更多详细信息，您可以在此处阅读

组件输出作为 HTML 自定义事件分派，自定义事件的名称与输出名称匹配。例如，对于一个带有 的组件@Output() valueChanged = new EventEmitter()，对应的自定义元素将调度名为“valueChanged”的事件，并且发出的数据将存储在事件的详细信息属性中。如果您提供别名，则使用该值；例如，@Output('myClick') clicks = new EventEmitter<string>();导致调度事件的名称为“myClick”。

于 2019-11-04T07:12:11.403 回答
0

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

于 2021-01-04T19:22:26.380 回答