Angular2 实例绑定(bind)方法不能作为钩子(Hook)使用

Question

通过使用实例绑定(bind)方法实现 ngOnInit() 钩子(Hook)，但它停止工作......

简化示例:

 import { Component } from '@angular/core';

  @Component({
    selector: 'my-app',
    template: '<h1>Hello {{name}}</h1>'
  })
  export class AppComponent { 
    name = 'Angular'; 
    
    ngOnInit = () => {
      this.name = 'World';
    }
  }

预期结果=>“Hello World” 真实结果=>“Hello Angular”

是否在某个地方描述了这些方法不允许完全用于钩子(Hook)？或者这样使用它们有什么问题？

实例:https://plnkr.co/edit/aZ1CYkDn06KUENmDW3a3?p=preview

重要提示:问题不是如何解决。我知道我可以更改为 ngOnInit() {}。问题是 - 为什么实例绑定(bind)方法不能作为钩子(Hook)使用

跟进 在 Angular 存储库中创建了一个问题 - 改进行为/文档/错误通知:https://github.com/angular/angular/issues/16478估计会有更明确的答案。在明确/确认行为是通过设计仅检查类原型(prototype)后，将在此处发布。

Answer 1

应该是

ngOnInit() {
    this.name = 'World';
}

想象一下你正在覆盖默认周期

已修复插件:https://plnkr.co/edit/DGkNulwYs4WpYULhl9gD?p=preview

注意:

正如文档中所述，实现生命周期 Hook 是可选的。因为 javascript 没有接口(interface)

来源:https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#interface-optional

编辑:

您所做的只是在组件内创建一个名为 ngOnInit 的函数，如果您想执行它，则必须在组件内的某个位置执行它。最好的地方似乎是构造函数:

constructor(){
    this.ngOnInit();    
}

已修复插件:https://plnkr.co/edit/NAHX5vfoMXtN95Y0oyOR?p=preview

编辑2:

这是原型(prototype)的证明:

按照您的方式，该函数将不会成为组件基类原型(prototype)链的一部分(第 17 行):

但是这样 Angular 就会将其视为原型(prototype)链的一部分(第 15 行):