作为引用传递的 Angular 5/4/2 方法不在范围内

运行整个示例

我有一个简单的模块，我将其命名为：

<app-button [(registerOnClickEvent)]="alertTest" ></app-button>

该模块在内部监听点击事件并将其传递到外部，以alertTest:

@Component({
  selector: 'app-button',
  template: '<button (click)="passTheClickEvent($event)"  value="test"  >Click</button>',
})
export class ButtonComponent    {
  @Input() 
  registerOnClickEvent : Function = new Function();

  passTheClickEvent(){
    this.registerOnClickEvent();
  }
}

inside alertTest, the appModel未定义：

export class AppComponent  {
  appModel : AppModel = {name : "Ron Howard"};
  alertTest(){
    console.log(this.appModel); // this.appModel us undefined
    alert("test");
  }
}

我不明白为什么？我正在发起它：

appModel : AppModel = {name : "Ron Howard"};

运行整个示例

你必须使用箭头函数来实现这一点

工作示例：https://stackblitz.com/edit/angular-hbfhxu?file=app/app.component.ts

export class AppComponent  {
   appModel : AppModel = {name : "Ron Howard"};

   // convert the function into arrow function
   alertTest = () => {
      console.log(this.appModel);
      alert(this.appModel);
   }
}

要了解有关箭头函数的更多信息，请参阅mozilla 文档链接

箭头函数表达式的语法比函数更短 表达式并且没有自己的 this、arguments、super 或 新的目标。这些函数表达式最适合非方法 函数，并且它们不能用作构造函数。

在箭头函数之前，每个新函数都定义了自己的 this 值 （在构造函数的情况下是一个新对象，在严格模式下未定义 函数调用，如果函数被调用为基对象 “对象方法”等）。事实证明，这不太理想 面向对象的编程风格。