Angular Elements EventEmitter : $event 不显示发射值答案

【问题标题】：Angular Elements EventEmmitter : $event not showing emitted valueAngular Elements EventEmitter : $event 不显示发射值
【发布时间】：2019-12-04 12:02:44
【问题描述】：

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

【问题讨论】：

向我展示如何在子组件中发出数据的代码
@TonyNgo 请查看更新后的问题
@TonyNgo 向我展示了 $event 的输入，而不是 true 或 false
如果你的发射是真的，你怎么会是假的
@Paul true 或 false 基于条件。它不显示真假。它的输入显示事件

标签： angular angular-elements

【解决方案1】：

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

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

【讨论】：

没有比这更好的方法了吗？更好的方法，比如只在自定义元素本身中发送 $event.detail？

【解决方案2】：

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

【讨论】：