Angular2实例绑定方法不能用作钩子

Question

使用实例绑定方法实现了ngOnInit（）挂钩，并使其停止工作....

简化示例：

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

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

预期结果=＆gt; “你好，世界” 真实结果=＆gt; “Hello Angular”

是否描述了某些地方确实不允许将这些方法用于钩子？或者使用它们的问题是什么？

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

重要提示：问题不在于如何修复。我知道我可以改为ngOnInit() {}。问题是 - 为什么实例绑定方法不能用作挂钩

关注在Angular回购中创建了一个问题 - 改进行为/文档/错误通知：https://github.com/angular/angular/issues/16478猜测会有更明确的答案。在明确/确认行为是通过设计检查类原型后，将在此处发布。

Answer 1

应该是

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

将其视为覆盖默认周期

固定弹药：https://plnkr.co/edit/DGkNulwYs4WpYULhl9gD?p=preview

注意：

实现生命周期钩子是可选的，如文档中所述。因为javascript没有接口

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

修改：

您正在做的只是在组件内部创建一个名为ngOnInit的函数，如果要执行它，则必须在组件内的某个位置执行此操作。最好的地方似乎是构造函数：

constructor(){
    this.ngOnInit();    
}

固定弹药：https://plnkr.co/edit/NAHX5vfoMXtN95Y0oyOR?p=preview

<强> EDIT2：

以下是原型的证明：

按照你的方式，函数将不成为组件基类的原型链的一部分（第17行）：

但是这样Angular会将它视为原型链的一部分（第15行）：

Answer 2

添加工具并更改ngOnInit，如echonax说：

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

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

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

Answer 3

明确声明该组件实现OnInit并修复函数实现语法：

export class AppComponent implements OnInit { 
    public ngOnInit(): void {
       this.name = 'World';
    }
}