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

Я создал небольшой веб-компонент с помощью этой статьи используя угловой элемент, который включает @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
      });

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


javascript angular web-component angular-elements angular-event-emitter
person Shail_bee    schedule 04.11.2019    source источник
comment
Это не способ Angular ... Я предполагаю, что вы где-то включаете selector излучающего компонента в свой html? Вы можете подключиться к выходу там. например: <my-component (likeNotify)="callFunction()"></my-component>   -  person Carsten    schedule 04.11.2019
comment
@Carsten, это веб-компоненты, нечто иное, чем вы думаете. В любом случае, насколько мне известно, само значение события должно иметь логическое значение. Итак, вы можете сделать console.log(e), и он должен регистрировать true   -  person Poul Kruijt    schedule 04.11.2019
comment
@PierreDuc Ой, упс. Виноват. Я должен начать читать :)   -  person Carsten    schedule 04.11.2019
comment
@Carsten, все в порядке :) Я тоже был неправ, видимо это event.detail, который будет содержать данные о событии   -  person Poul Kruijt    schedule 04.11.2019
comment
@Carsten, event.detail - это то, что я искал, работает как шарм.   -  person Shail_bee    schedule 04.11.2019

Ответы (2)


arrow_upward
11
arrow_downward

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

person Poul Kruijt    schedule 04.11.2019

arrow_upward
0
arrow_downward

Недавно я создал небольшой веб-компонент с Angular Elements с использованием Angular 11. Мне не удалось получить данные из своего события с помощью event.detail, я обнаружил, что данные, похоже, находятся в event.originalEvent.detail. так что это будет что-то вроде: el.addEventListener('likeNotify', (event) => console.log(event.originalEvent.detail));

person chris c    schedule 04.01.2021