Слушайте Angular веб-компонент EventEmitter в JavaScript - PullRequest
Новая
       75

Слушайте Angular веб-компонент EventEmitter в JavaScript

0 голосов
/ 04 ноября 2019

Я создал небольшой веб-компонент с помощью этой статьи с использованием углового элемента, который включает @Input и @Output.

Я могу передать данные *Свойство 1007 *, но прослушивание события @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
      });

Итак, как я могу получить значение true / false из объекта e, переданного от эмиттера?

1 Ответ

2 голосов
/ 04 ноября 2019

Данные, передаваемые через Вывод в веб-компоненте, могут быть прочитаны из свойства 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».

...