为什么使用独立组件
了解独立组件如何简化 Angular。
为什么使用独立组件 是 CoddyKit 上的免费 Angular Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。
为什么使用独立组件？
独立组件让您能够不使用 NgModules构建 Angular 应用。组件会声明自身的依赖，使这些构建块彼此独立，更易于理解。
NgModule 时代
过去，每个组件、指令和管道都必须在 @NgModule 中声明。模块负责集中管理声明，并管理导入和导出。
这增加了样板代码，也引入了额外的间接层。
NgModules 带来的问题
NgModules 引入了一些常见的麻烦：忘记声明组件、在两个模块中重复声明组件、混淆导入与声明，以及引入过多内容的大型共享模块。
独立组件理念
使用独立组件时，每个组件都会通过自己的 imports 数组准确列出所需内容。不再需要一个必须了解该组件的中央模块。
import { Component } from '@angular/core';
@Component({
selector: 'app-hello',
standalone: true,
template: '<p>Hello</p>'
})
export class HelloComponent {}自包含的依赖
由于独立组件会声明自身的依赖，您只需阅读一个文件，就能了解它所依赖的一切。这有助于提升代码清晰度和工具支持。
更少的样板代码
不再需要跨模块匹配声明和导出。您可以在使用组件的位置直接导入它，这与 ES 模块的工作方式类似。
更好的摇树优化
独立组件会明确展示依赖关系图，从而帮助打包工具移除未使用的代码，并可能生成更小的构建包。
轻松实现延迟加载
路由可以通过动态导入直接延迟加载独立组件，无需功能模块包装器。
// route: loadComponent: () => import('./page.component').then(m => m.PageComponent)新的默认方式
在较新的 Angular 版本中，新生成的组件默认采用独立模式。NgModules 仍然可用，但独立组件是官方推荐的发展方向。
与 NgModules 互操作
独立组件与基于模块的代码可以互操作。独立组件可以导入到 NgModule 中，而基于 NgModule 的组件也可以使用独立导入，从而简化迁移过程。
仍需配置的内容
应用级设置（例如路由器或 HTTP 客户端）通过 bootstrapApplication 的 providers 提供，而不是通过根模块提供；稍后您会看到具体用法。
快速检查：为什么使用独立组件
独立组件的核心优势是什么？
回顾：为什么使用独立组件
独立组件让每个组件声明自身的依赖，从而消除了 NgModule 的样板代码。这带来了更清晰的代码、更简单的延迟加载和更好的摇树优化。独立组件现在已是默认方式。接下来：创建独立组件。
常见问题解答
「为什么使用独立组件」课时是免费的吗？
是的 — 「为什么使用独立组件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。
「为什么使用独立组件」这节课中我会学到什么？
了解独立组件如何简化 Angular。 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Angular Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「为什么使用独立组件」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Angular Academy 课中编写并运行代码吗？
能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。