角EventEmitter父级，这等于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

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

[ndcDynamicOutputs]="{newItemEvent: create}"

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

create() {
  this.myMethod()
}

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

第一个是使用this函数附加bind。

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

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

另一种选择是重构您的create方法，这样它就不会访问this，但是这可能不可行。