Angular EventEmitter parent 这等于 EventEmitter

Question

我的问题是在 EventEmitter 触发后返回父元素时，我的“this”是父级的 EventEmitter 本身，因此我无法访问属于父级的任何方法/变量。 我做错了什么，或者它应该如何工作？

也许问题来自动态组件？ 不确定，因为我认为这是我与其他示例相比的唯一不同之处。 似乎正在工作。

我的子组件：

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

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

HTML：

<form class="form">
    <mat-form-field class="form__input">
      <input matInput placeholder="Name"  name="name" type="name"  [(ngModel)]="item.name">
    </mat-form-field>

    <div class="form-actions">
      <button mat-raised-button color="primary" type="submit" (click)="createElement()">Create</button>
    </div>
</form>

家长：

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

HTML

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

这是我的错误：

ERROR TypeError: this.myMethod is not a function
  at Object.create [as newItemEvent] .....

好吧，这是事件发射器，所以是的，没有方法“myMethod”。

Answer 1

您将组件 class 的方法作为参数传递给ndcDynamicOutputs 。

[ndcDynamicOutputs]="{newItemEvent: create}"

在create方法中，您可以访问this 。

create() {
  this.myMethod()
}

问题是，当您将方法作为参数传递时，它不再具有来自 class 的this上下文。 this将有另一个价值。 所以你在这里有两个选择：

第一个是使用bind function 附加this 。

getCreateMethod() {
  return this.create.bind(this);
}

[ndcDynamicOutputs]="{newItemEvent: getCreateMethod() }">

另一种选择是重构您的 create 方法，使其无法访问this ，但这可能不可行。