Angular动态组件EventEmitter触发后父组件this指向异常求助

问题说明 #

使用ndc-dynamic动态组件时，子组件通过EventEmitter触发事件后，父组件的事件处理方法中this指向异常，无法访问父组件的方法或变量，报错ERROR TypeError: this.myMethod is not a function。此时this指向的是EventEmitter相关对象，而非父组件实例。

原因 #

在ndc-dynamic的[ndcDynamicOutputs]配置中，直接传递父组件方法的引用时，方法的上下文（this）会丢失，不会自动绑定到父组件实例上，导致调用时this指向调用该方法的对象。

解决方案 #

有两种可行的修复方式：

方式一：使用箭头函数包裹事件处理方法 #

在父组件HTML的动态组件配置中，用箭头函数包裹事件处理方法，确保this指向父组件实例：

<ndc-dynamic 
  [ndcDynamicInputs]="{item: selectedElement}" 
  [ndcDynamicComponent]="selectedElement.component" 
  [ndcDynamicOutputs]="{newItemEvent: (element) => this.create(element)}">
</ndc-dynamic>

方式二：提前绑定方法的上下文 #

在父组件的构造函数中，将create方法的this绑定到父组件实例：

constructor() {
  // 绑定this到父组件实例
  this.create = this.create.bind(this);
}

//create the structure element
create (element)
{
  //do something
  this.myMethod(element); 
}

此时父组件HTML可以保持原写法不变。

验证子组件代码 #

你的子组件代码写法没有问题，EventEmitter的定义和触发逻辑都是正确的：

@Input() item: someItem;
@Output() newItemEvent = new EventEmitter<any>();

createElement()
{
  this.newItemEvent.emit(this.item);
}

内容的提问来源于stack exchange，提问作者Daniel