Angular Elements EventEmmitter：$event 未显示发出的值

Question

我在使用自定义 Angular 元素时卡住了，每当我发出一个值 ie trueor 时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)
}

而不是显示发出的数据 ietrue或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')。这意味着您将始终获得正确的事件对象，而不是原始对象。

组件输出作为 HTML 自定义事件分派，自定义事件的名称与输出名称匹配。例如，对于带有@Output() valueChanged = new EventEmitter() 的组件，相应的自定义元素将调度名为“valueChanged”的事件，并且发出的数据将存储在事件的 detail 属性中。如果您提供别名，则使用该值；例如，@Output('myClick') clicks = new EventEmitter(); 导致名为“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