Angular 元素 EventEmmitter：$event 未显示发射值

Question

我在使用自定义 Angular 元素时卡住了，每当我发出一个值，即 true 或 false，它在同一个 element 中工作正常=42=] 项目，每当我通过创建其捆绑的 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)

我在 change 事件中调用此 emit。

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

Answer 2

如果您只想从 app-address 组件发出布尔值，则需要检查 event.target.value 或者在您的情况下 data.target.value :-)

Angular 元素 EventEmmitter：$event 未显示发射值

Angular Elements EventEmmitter : $event not showing emitted value

angular

angular-elements