问题
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