3

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

4

3 回答 3

4

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()方法，否则您将遇到编译错误

于 2018-09-26T07:07:05.817 回答
0

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

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

如下所示：

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

但是它会运行良好，因为最终 TS 代码会编译为 JavaScript。

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

于 2018-09-26T07:36:55.463 回答
0

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

关于第二点，实现该接口的目的，您应该记住 Angular 引导程序的第 2 阶段：

  1. 组件树构建
  2. 变更检测

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

于 2018-09-26T07:45:00.197 回答