Angular Elements EventEmmitter : $event not showing emitted value

问题

I am stuck while working with Custom Angular Elements, Whenever i emit a value i.e true or false, it works fine while using element in same angular project, whenever i use the element in other project by creating its bundled JS file. It shows the Inputs events in the parent component.

This is my Angular Elements in Parent Component

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

In parent Component i am accessing value like

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

Instead of showing emitted data i.e true or false its showing me inputs event.

This is how i am importing file

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

Child Component

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

I am calling this emit on change event.

回答1:

Angular elements dispatch outputs as custom events document.createEvent('CustomEvent') . That means you will always get a proper event object and never a primitive.

Component outputs are dispatched as HTML Custom Events, with the name of the custom event matching the output name. For example, for a component with @Output() valueChanged = new EventEmitter(), the corresponding custom element will dispatch events with the name "valueChanged", and the emitted data will be stored on the event’s detail property. If you provide an alias, that value is used; for example, @Output('myClick') clicks = new EventEmitter(); results in dispatch events with the name "myClick".

So your code should be something like: <some-element (someEvent)="eventHandler($event.detail)> </some-element>"

See:

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

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

回答2:

If you just want the boolean value emitted from the app-address component you'll need to check event.target.value or in your case data.target.value :-)

来源：https://stackoverflow.com/questions/57215011/angular-elements-eventemmitter-event-not-showing-emitted-value

标签

angular

angular-elements