Angular Academy · 课时

ngOnInit 与初始化

Q: 「ngOnInit 与初始化」这节课中我会学到什么？

在组件启动时运行设置逻辑。 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

在组件启动时运行设置逻辑。

ngOnInit 与初始化 是 CoddyKit 上的免费 Angular Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

什么是生命周期钩子？

Angular 组件拥有由框架管理的生命周期：创建、变更检测、渲染和销毁。生命周期钩子让您可以在特定时刻运行代码。

认识 OnInit

OnInit 钩子会运行一次，在 Angular 设置好组件输入并渲染初始视图之后执行。它是放置初始化逻辑的标准位置。

实现 OnInit

实现 OnInit 接口，并添加 ngOnInit 方法。Angular 会自动调用它。

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

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnInit {
  ngOnInit(): void {
    console.log("Component initialized");
  }
}

构造函数与 ngOnInit

构造函数最先运行，此时输入尚未设置，因此其中只应进行轻量的依赖注入。输入可用后，请使用 ngOnInit 进行实际初始化。

constructor(private http: HttpClient) {
  // inputs NOT ready yet
}

ngOnInit() {
  // inputs ARE ready here
}

ngOnInit 中输入已就绪

当 ngOnInit 运行时，所有 @Input 属性都已经从父组件绑定了初始值。

@Input() userId!: string;

ngOnInit() {
  console.log(this.userId); // available
}

在 ngOnInit 中获取数据

一种常见做法是在 ngOnInit 中从服务加载数据，因为此时您可以访问输入和依赖项。

ngOnInit() {
  this.userService.getUser(this.userId)
    .subscribe(u => this.user = u);
}

ngOnInit 只运行一次

与变更检测钩子不同，ngOnInit 在组件生命周期中只运行一次，并且紧接在第一次 ngOnChanges 之后运行。

与 ngOnChanges 的顺序关系

如果组件有输入，ngOnChanges 会先使用初始值触发，然后运行 ngOnInit。即使没有输入，ngOnInit 仍然会运行。

// sequence with inputs:
// 1. constructor
// 2. ngOnChanges (first)
// 3. ngOnInit

初始化表单

构建响应式表单是 ngOnInit 的经典任务，因为您可能需要注入的服务来设置表单。

form!: FormGroup;

ngOnInit() {
  this.form = this.fb.group({
    name: [""],
    email: [""]
  });
}

保持构造函数轻量

避免在构造函数中执行繁重工作。它会在 Angular 连接输入之前运行，而其中的副作用会让组件更难测试和预测。

异步初始化

您可以从 ngOnInit 调用异步逻辑，但该方法本身返回 void；请在其中订阅或使用异步模式。

ngOnInit() {
  this.loadAsync();
}

private async loadAsync() {
  this.data = await firstValueFrom(this.api.get());
}

快速检查

检查您对 OnInit 的理解。

回顾

带有 ngOnInit 的 OnInit 钩子会在输入绑定后运行一次，非常适合获取数据和设置表单。请保持构造函数轻量，并将初始化工作放在 ngOnInit 中。

常见问题解答

「ngOnInit 与初始化」课时是免费的吗？

是的 — 「ngOnInit 与初始化」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「ngOnInit 与初始化」这节课中我会学到什么？

在组件启动时运行设置逻辑。你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「ngOnInit 与初始化」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy