Question

我具有以下angular2组件，其中在listenerSelectedChanges()上实现了EventEmitter。我想在需要时退订事件。为此，该想法是-使用函数而不是lambda。

现在我面临的问题是，在我的listenerSelectedChanges()函数中-“ .this”对象无效。

问题： JS / Typescript中函数的生命周期是什么？该函数的寿命可以比其父函数更长吗？

export class Auth0Component implements OnInit, OnChanges {

  @Input() selectedEnvironment: Environment;
  @Output() identityTokenReceived = new EventEmitter(); // component should use the emitter of the AWSService

  listenerSelectedChanges = function (idToken: string) {
    this.identityTokenReceived.emit(idToken);
  };


  // bind to the AWSservice emitter
  ngOnChanges(changes: SimpleChanges) {
    console.log(changes);

    if (this.selectedEnvironment !== undefined) {
      // would like to use listenerSelectedChanges() here
      this.selectedEnvironment.auth0Session.identityTokenReceived.subscribe(idToken => {
          this.identityTokenReceived.emit(idToken);
      });
    }

    // unsubscribe here
  }

}

Answer 1

将实现更改为箭头功能，以保持正确的xamDataGrid上下文：

this

Answer 2

这样定义您的函数，以使“ this”指向您的组件：

listenerSelectedChanges = (idToken: string) => {
  this.identityTokenReceived.emit(idToken);
};

并正常拨打电话：

 listenerSelectedChanges = (idToken: string) => {
   this.identityTokenReceived.emit(idToken);
 };

他是该行为的文档：

箭头函数本身没有此函数。使用封闭词汇范围的this值；箭头函数遵循正常的变量查找规则。因此，在搜索当前范围中不存在的内容时，他们最终从其范围内找到了它。

Copied from MDN -> Arrow functions

Answer 3

尝试在方法的开头定义一个名为self的常量，该常量包含this的值。然后在未定义的地方使用它。这意味着您的代码将如下所示：

ngOnChanges(changes: SimpleChanges) {
    const self = this;
    console.log(changes);

    if (this.selectedEnvironment !== undefined) {
      // would like to use listenerSelectedChanges() here
      this.selectedEnvironment.auth0Session.identityTokenReceived.subscribe(idToken => {
          self.identityTokenReceived.emit(idToken);
      });
    }

    // unsubscribe here
}

“ this”在函数中变为uindefined

3 个答案: