在Angular生命周期中

1) Angular注入器检测构造函数参数和实例化类。

2)下一个角调用生命周期

Angular生命周期钩子

调用指令参数绑定。

开始角渲染…

调用具有角生命周期状态的其他方法。

《Angular中构造函数和ngOnInit的本质区别》一文从多个角度探讨了其中的区别。这个答案提供了与组件初始化过程相关的最重要的差异解释，也显示了使用上的差异。

Angular的引导过程包括两个主要阶段:

构造组件树 运行变更检测

当Angular构造组件树时，会调用组件的构造函数。所有生命周期钩子都作为运行变更检测的一部分被调用。

当Angular构建组件树时，根模块注入器已经配置好了，所以你可以注入任何全局依赖项。另外，当Angular实例化一个子组件类时，父组件的注入器也已经设置好了，这样你就可以注入父组件上定义的提供商，包括父组件本身。组件构造函数是唯一在注入器上下文中被调用的方法，所以如果你需要任何依赖项，只有从那里才能获得这些依赖项。

当Angular开始更改检测时，组件树就被构造了，树中所有组件的构造函数都被调用了。每个组件的模板节点也被添加到DOM中。@Input通信机制是在更改检测期间处理的，因此您不能期望构造函数中有可用的属性。它将在ngOnInit之后可用。

让我们看一个简单的例子。假设你有以下模板:

<my-app>
   <child-comp [i]='prop'>

所以Angular开始引导应用程序。正如我所说，它首先为每个组件创建类。它调用MyAppComponent构造函数。它还创建了一个DOM节点，它是my-app组件的宿主元素。然后它继续为child-comp创建一个宿主元素并调用ChildComponent构造函数。在这个阶段，它并不真正关心i输入绑定和任何生命周期钩子。所以当这个过程结束时，Angular就会得到如下的组件视图树:

MyAppView
  - MyApp component instance
  - my-app host element data
       ChildCompnentView
         - ChildComponent component instance
         - child-comp host element data  

然后才运行更改检测和更新my-app的绑定，并在MyAppComponent类上调用ngOnInit。然后它继续更新child-comp的绑定，并在ChildComponent类上调用ngOnInit。

你可以在构造函数或ngOnInit中进行初始化逻辑，这取决于你需要什么。例如，本文介绍了如何在@ViewChild查询被求值之前获取ViewContainerRef，这篇文章展示了可以要求在构造函数中执行什么类型的初始化逻辑。

这里有一些文章可以帮助你更好地理解这个话题:

关于Angular中的变更检测，你需要知道的一切 Angular的$digest在Angular的新版本中重生了 属性绑定的机制会在Angular中更新

第一个(构造函数)与类实例化有关，与Angular2无关。构造函数可以用在任何类上。您可以在其中放入一些新创建实例的初始化处理。

第二个对应于Angular2组件的生命周期钩子:

引用自angular官方网站:

当输入或输出绑定值发生变化时调用ngOnChanges 在第一个ngOnChanges之后调用ngOnInit

所以如果初始化处理依赖于组件的绑定(例如用@Input定义的组件参数)，你应该使用ngOnInit，否则构造函数就足够了…

构造函数在类实例化时执行。它与棱角无关。这是Javascript的特性，Angular无法控制它

ngOnInit是Angular特有的，当Angular用所有输入属性初始化组件时，它会被调用

@Input属性在ngOnInit生命周期钩子下可用。这将帮助你做一些初始化的事情，比如从后端服务器获取数据等显示在视图中

@Input属性在构造函数中显示为未定义

我认为最好的例子是使用服务。假设我想在我的组件“激活”时从我的服务器获取数据。假设我还想在从服务器获取数据后对数据做一些额外的处理，也许我得到了一个错误，想要以不同的方式记录它。

在构造函数上使用ngOnInit真的很容易，它还限制了我需要添加到应用程序中的回调层的数量。

例如:

export class Users implements OnInit{

    user_list: Array<any>;

    constructor(private _userService: UserService){
    };

    ngOnInit(){
        this.getUsers();
    };

    getUsers(){
        this._userService.getUsersFromService().subscribe(users =>  this.user_list = users);
    };


}

对于构造函数，我可以只调用我的_userService并填充我的user_list，但也许我想对它做一些额外的事情。比如确保所有内容都是大写的，我不完全确定我的数据是如何通过的。

这让使用ngOnInit更容易。

export class Users implements OnInit{

    user_list: Array<any>;

    constructor(private _userService: UserService){
    };

    ngOnInit(){
        this.getUsers();
    };

    getUsers(){
        this._userService.getUsersFromService().subscribe(users =>  this.user_list = users);
        this.user_list.toUpperCase();
    };


}

它使它更容易看到，所以当我初始化时，我只是在组件中调用我的函数而不是在其他地方寻找它。实际上，它只是另一个工具，可以让你在将来更容易阅读和使用。此外，我发现将函数调用放在构造函数中是非常糟糕的实践!

构造函数是ES6的一部分，typescript使用ES6语法，现在也使用es7语法，所以你可以利用typescript将编译为es5/es4(根据你的定义)的高级功能来提供对旧浏览器的支持。

而ngOnInIt是angular的生命周期钩子。当你的组件被初始化时，它也被初始化。(把它的状态看作是新生的状态)

使用ngOnInIt比较构造函数是明智的，因为你有另一个生命周期钩子，如ngOnDestory(认为它是任何生命的死亡)。在这里，你可以取消订阅任何可观察对象，这有助于防止任何内存泄漏。

如果有任何问题，请随意评论这个答案。