EventEmitter 发出数据但不发出事件

Question

我在特定场景中挣扎。这是我的 Parent 和 Child class 的样子

export class ChildComponent{
    .....
    @Output select: EventEmiiter<SomeType> = new EventEmmiter();
    ....
    ....

    methodWhichEmits(){
          this.select.emit(objectOf_SomeType);
    }
}




 export class ParentComponent{

        onSelect(emittedObject){
              //perform some logic
              event.stopPropagation();
        }
    }



 Parent Template
   <child (select)="onSelect($event)"></child>

我的理解（刚接触 angular）是事件从 child 发出并在 parent 中捕获然后在 onSelect parent 方法中对发出的事件（事件绑定）执行逻辑。

但问题是parent方法的参数不是事件而是child传来的SomeType的object。我想在我的 parent 方法中接收一个事件并使用事件 object（类似于 event.target.value）访问从 child 发出的数据，因为我需要事件 object 调用 stopPropagation()。

即使代码工作正常但测试用例失败（在 topPropagation() 上），因为在 parent 的方法中接收到 SomeType 的 object 而不是事件。

Answer 1

EventEmitter 不是 HTML 事件，而是 Subject 的扩展，因此它只会发送具有值

的事件

Answer 2

自定义 Anguar 事件与本地事件不同。它们只是您所注意到的对象，它们不会传播，也无法取消。

Answer 3

如果您可以放弃 SomeType 类型，一种解决方法是在子组件中调用 stopPropagation() 并将 target 作为事件参数发送。尝试以下

子组件

export class ChildComponent implements OnInit {
  @Output() select = new EventEmitter();

  handleSomething(event) {
    event.stopPropagation();
    this.methodWhichEmits(event.target);
  }

  methodWhichEmits(value) {
    this.select.emit(value)
  }
}

父组件 - 模板

<app-child (select)=onSelect($event)></app-child>

父组件 - 控制器

onSelect(target: any) {
  // handle target  
}

如果您尝试将 event 作为发射器值直接发送，由于事件冒泡，可能会产生一些不需要的副作用。

EventEmitter 发出数据但不发出事件

EventEmitter emits data but not event

angular

events

event-handling

event-binding