Параметры JS CustomEvent, передаваемые как неопределенные в Angular

Question

Я пытаюсь вызвать функцию Angular из JS, однако параметры, передаваемые в Angular, не определены.Что мне не хватает?В идеале я хотел бы также вернуть результат от dispatchedEvent.Есть ли лучшее решение, которое я должен использовать?

JS функция

  var event = new CustomEvent('test', {
    id: "a", id2:"ttt"
  });
  window.dispatchEvent(event);

Угловой компонент

  @HostListener('window:test', ['$event.id','$event.id2'])
  test(id,id2) {
    console.log('ang called from JS: '+id+' '+id2)
  }

Вывод на консоль: ang вызывается из JS: undefined undefined

ЦЕЛЬ: анг вызван из JS: ттт

Answer 1

Насколько я знаю, в CustomEvent можно передать только один параметр, который равен detail. Итак, ваш код не должен быть компилируемым. Вам нужно изменить это как

onClick() {
  const event = new CustomEvent('test', {
    detail: {
      id: 'a', id2: 'ttt'
    }
  });
  window.dispatchEvent(event);
}

После этого ваш обработчик будет

@HostListener('window:test', ['$event.detail.id', '$event.detail.id2'])
test(id, id2) {
  console.log('ang called from JS: ' + id + ' ' + id2);
}