实现 OnInit 类的目的是什么，删除 ngOnInit 可以正常工作？答案

【问题标题】：what is the purpose of implementing OnInit class, removing ngOnInit works fine?实现 OnInit 类的目的是什么，删除 ngOnInit 可以正常工作？
【发布时间】：2019-03-01 21:10:44
【问题描述】：

在 Angular 6 中，当我们创建一个组件时，该组件的 .ts 文件有一个实现 OnInit 类的类，但是当我们删除默认方法（ngOnInit）时，它可以正常工作。所以我的问题是，如果它实现了某个类，那么它必须有一些必须在这个实现的类中实现的方法，如果这不是必需的方法，那么实现 OnInit 类的目的是什么。

【问题讨论】：

它不能“正常工作”。你得到一个编译错误。现在，也许你忽略了它，但这是个坏主意。
@JBNizet 这不是真的
@JBNizet create an angular project here stackblitz.com 你会看到默认情况下甚至不包括在内，并且工作得很好
所以问题就变成了，可以不在 typescript 中实现方法吗？
这不是关于它是否可以，它只是一个好习惯。即使我不使用它我也会添加它

标签： angular oop angular6 interface-implementation

【解决方案1】：

ngOnInit 是 Angular 调用的生命周期钩子，表示 Angular 已完成创建组件。

我们导入OnInit 以便使用它，实现OnInit 不是强制性的，但被认为是好的做法）：

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

我们在组件创建后使用 ngOnInit 来做一些事情。例如你可以在这里设置变量，调用方法等。

https://angular.io/api/core/OnInit

如果您导入OnInit 并执行export class AppComponent implements OnInit，则必须添加ngOnInit() 方法，否则您将遇到编译错误

【讨论】：

谢谢您的回复，是不是按照实现类和接口的定义实现方法是必须的，或者在打字稿中可以吗？
如果您导入OnInit 并执行export class AppComponent implements OnInit 那么您必须添加ngOnInit() 方法
为什么没有其他生命周期？ ngAfterViewInit ngAfterContentInit，ngOnDestroy？为什么不实现 LifeCycle 而不是 1 ngOnInit only

【解决方案2】：

OnInit 不是一个类，而是框架提供的一个接口，因此如果您想在初始化组件时执行某些操作，您可以在您的类中提供一个 ngOnInit() 方法并将您的代码放在那里。更多关于 ngOnInt 的信息：https://angular.io/api/core/OnInit

如果你实现了 OnInit 接口但没有提供 ngOnInit，你会在 VSCode 或其他编辑器抛出的代码中收到编译错误。

如下所示：

类“ClaimComponent”错误地实现了接口“OnInit”。 “GiftingClaimComponent”类型中缺少属性“ngOnInit”。

但是，随着 TS 代码最终编译为 JavaScript，它将运行良好。

而且由于 JavaScript 没有我们在 TypeScript 中获得的类型安全或接口概念。但是，如果您尝试创建应用程序的 AOT 构建，它将失败，您必须提供实现。

【讨论】：

【解决方案3】：

正如@Patricio Vargas 所说，如果您导出实现OnInit 接口的类组件，则需要实现ngOnInit() 方法，否则您将收到错误TS2420（您当然可以尝试on stackblitz 只需在为 Angular 项目提供的默认 AppComponent 中实现 OnInit 接口即可。

关于第二点，实现该接口的目的，你应该记住Angular bootstrap的2阶段：

组件树构造
变更检测

使用OnInit 钩子而不是在构造函数中初始化组件是一种很好的做法（有时需要），而不是在构造函数中（必须用于 DI），主要是因为构造函数调用是“Angular 组件树构造”的一部分'，然后输入绑定在构造函数中将不可用（因为它们是 the detection change phase 的一部分。

【讨论】：