Angular Elements EventEmmitter: $ event не показывает испускаемое значение

Я застрял во время работы с пользовательскими элементами Angular. Каждый раз, когда я генерирую значение, то есть true или false, он отлично работает при использовании element в том же угловом проекте, всякий раз, когда я использую элемент в другом проекте, создавая его связанный файл JS. Он показывает Inputs events в родительском компоненте.

Это мои угловые элементы в родительском компоненте

<app-address [model]="address"  [isAddressValid]="isValid" 
(getValidity)="getValue($event)" placeholder="placeholder" label="label" isRequired="false" ></app-address>

В родительском компоненте я получаю доступ к значению, например

getValue(data) {
   console.log(data)
}

Вместо того, чтобы показывать отправленные данные, то есть true или false, он показывает мне событие inputs.

Вот как я импортирую файл

import '../../../Elements/angular-address-element/elements/app-address-element'

Дочерний компонент

@Output() getValidity = new EventEmitter<any>();
this.getValidity.emit(true)

Я вызываю это emit на change мероприятие.


angular angular-elements
person Abdul Basit    schedule 26.07.2019    source источник
comment
Покажите мне код, как вы испускаете данные в своем дочернем компоненте   -  person Tony Ngo    schedule 26.07.2019
comment
@TonyNgo, пожалуйста, посмотрите обновленный вопрос   -  person Abdul Basit    schedule 26.07.2019
comment
@TonyNgo показывает мне $event вместо ввода вместо true или false   -  person Abdul Basit    schedule 26.07.2019
comment
как получилось, что вы ошиблись, если вы испускаете истину   -  person Poldo    schedule 26.07.2019
comment
@Paul true или false - в зависимости от условий. Это не показывает истину или ложь. Показывающее событие ввода   -  person Abdul Basit    schedule 26.07.2019
comment
небольшое улучшение: используйте здесь логическое значение вместо любого: @Output () getValidity = new EventEmitter ‹boolean› ();   -  person Kieran Ryan    schedule 10.08.2019
comment
проверьте это stackblitz.com/edit/angular-issue-repro2-ykz2nh   -  person Nikhil K S    schedule 12.10.2020

Ответы (2)


arrow_upward
4
arrow_downward

Элементы Angular отправляют выходные данные как пользовательские события document.createEvent('CustomEvent'). Это означает, что вы всегда получите правильный объект события, а не примитив.

Выходные данные компонентов отправляются как настраиваемые события HTML, при этом имя настраиваемого события совпадает с именем вывода. Например, для компонента с @Output () valueChanged = new EventEmitter () соответствующий настраиваемый элемент будет отправлять события с именем «valueChanged», а отправленные данные будут сохранены в свойстве detail события. Если вы указываете псевдоним, используется это значение; например, @Output ('myClick') clicks = new EventEmitter (); приводит к отправке событий с именем «myClick».

Итак, ваш код должен выглядеть примерно так: <some-element (someEvent)="eventHandler($event.detail)> </some-element>"

Видеть:

https://blog.angularindepth.com/how-angular-elements-uses-custom-events-mechanism-to-transmit-components-outputs-outside-angular-7b469386f6e2

https://angular.io/guide/elements#mapping

person Andrei Tătar    schedule 26.07.2019
comment
Нет лучшего способа, чем этот? Лучший способ, например, отправить только $ event.detail в самом настраиваемом элементе? - person Kavinda Jayakody; 05.04.2020

arrow_upward
0
arrow_downward

Если вам просто нужно, чтобы из компонента адреса приложения передавалось логическое значение, вам нужно проверить event.target.value или, в вашем случае, data.target.value :-)

person Kieran Ryan    schedule 10.08.2019