Angular Elements EventEmmitter : $event not showing emitted value

回眸只為那壹抹淺笑 提交于 2020-06-15 07:41:22

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!