Angular 元素事件发射器 : $event not showing emitted value

Question

我在使用自定义 Angular 元素时被卡住了，每当我发出一个值时，即 true或 false ，在使用 element 时效果很好在同一个 Angular 项目中，每当我通过创建捆绑的 JS 来使用其他项目中的元素时文件。它显示 Inputs events在父组件中。

这是我在父组件中的 Angular 元素

<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事件。

Answer 1

Angular 元素将输出作为自定义事件调度 document.createEvent('CustomEvent') .这意味着您将始终获得正确的事件对象，而不是原始对象。

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>"
看:

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

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