Angular Elements EventEmmitter：$ event不显示发射值 [英] Angular Elements EventEmmitter : $event not showing emitted value
问题描述
在使用自定义角度元素时，我陷入了困境，每当我发出一个值，即 true 或 false 时，它每当我在其他项目中通过创建捆绑的 JS 文件在其他项目中使用元素时，在同一个角度项目中使用 element 时工作正常。它在父组件中显示 Inputs事件。
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.
这是我在父组件中的Angular元素
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)
}
而不是显示发出的数据，即 true 或 false ，它显示的是 inputs 事件。
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'
子组件
@Output() getValidity = new EventEmitter<any>();
this.getValidity.emit(true)
我称之为在更改事件上发出。
推荐答案
角度元素将输出调度为自定义事件 document.createEvent（'CustomEvent'）。这意味着您将始终获得适当的事件对象，而永远不会获得原始对象。
Angular elements dispatch outputs as custom events document.createEvent('CustomEvent') . That means you will always get a proper event object and never a primitive.
组件输出将作为HTML自定义事件分发，名称为与输出名称匹配的自定义事件。例如，对于具有@Output（）valueChanged = new EventEmitter（）的组件，相应的自定义元素将调度名称为 valueChanged的事件，并且发出的数据将存储在事件的detail属性中。如果提供别名，则使用该值。例如，@ Output（'myClick'）点击=新的EventEmitter（）;
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".
所以您的代码应类似于：
< some-element（someEvent）= eventHandler（$ event.detail）>< / some-element>
So your code should be something like:
<some-element (someEvent)="eventHandler($event.detail)> </some-element>"
请参阅：
https://angular.io/guide/elements#mapping
这篇关于Angular Elements EventEmmitter：$ event不显示发射值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
