事件发射器模板未定义

Question

我正在基于 React 使用模板构建 Web 组件。该值已发出，但在我调用时在组件上显示未定义。

  @Event() newModuleClicked: EventEmitter<any>;

  handleClick(e) {
    this.newModuleClicked.emit(e); //data is coming here when clicked
  }



   <ul class="portal-navigation__scrollable">
            {this.dataNavigation.map((item) => (
              <li key={item.id} onClick={() => this.handleClick(item.Name)}>
               {item.Name}
              </li>
            ))}
          </ul>

我调用的组件显示未定义

  <navigation
    [dataNavigation]="data"
    (newModuleClicked)="onChange($event)"
  ></navigation>

  onChange(ev: any) {
    console.log('got data', ev.target.value); //undefined 
  }

Answer 1

您传递给 .emit() 的值将在 Stencil 组件发出的 CustomEvent 的 detail 属性中。因此，要获得实际名称，只需将您的事件处理程序重写为：

onChange(ev: any) {
    console.log('got data', ev.detail);
}

您还可以为事件提供更具体的 CustomEvent<any> 类型（any 派生自 EventEmitter<any> 的事件声明）：

onChange(ev: CustomEvent<any>) {
    console.log('got data', ev.detail);
}

事件发射器模板未定义

Event emitter stencil undefined

javascript

reactjs

angular

stenciljs