什么是独立组件？

Question

什么是独立组件？

Accepted Answer

**独立组件**（Angular 14+，在较新版本中是默认方式）允许组件**直接声明自己的依赖项**，而无需属于 `NgModule`。它们大大减少了样板代码，现在是构建 Angular 应用的推荐方式。 ## 一个独立组件 ```ts import { Component } from "@angular/core"; import { CommonModule } from "@angular/common"; import { RouterLink } from "@angular/router"; @Component({ selector: "app-user-list", standalone: true, // ← no NgModule needed imports: [CommonModule, RouterLink], // ← declare dependencies HERE, on the component template: ` {{ u.name }} `, }) export class UserListComponent { users = []; } ``` 该组件准确导入其模板使用的内容（`CommonModule` 用于 `*ngFor`、`RouterLink` 用于链接）— 其依赖项是显式的且共位置的，而不是在单独的 NgModule 中声明。 ## 与 NgModules 的对比 ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## 启动独立应用（无 AppModule） ```ts import { bootstrapApplication } from "@angular/platform-browser"; import { provideRouter } from "@angular/router"; import { provideHttpClient } from "@angular/common/http"; bootstrapApplication(AppComponent, { providers: [ provideRouter(routes), // configure router functionally provideHttpClient(), // HttpClient without HttpClientModule ], }); ``` 独立应用用 `bootstrapApplication` 和 **`provideX`** 函数替换根 `AppModule` — 一个更简洁的、基于函数的配置。 ## 优势 ```text ✓ Less boilerplate — no NgModule files to maintain ✓ Explicit dependencies — see exactly what a component uses ✓ Easier lazy loading — loadComponent() directly ✓ Simpler mental model — components are self-contained units ✓ Better tree-shaking potential ``` ## 为什么这很重要独立组件是 **Angular 的现代方向** — 框架现在默认使用独立方式进行脚手架，并提供 `provideX` 函数来无需模块地配置功能。它们消除了长期存在的 NgModule 开销，使依赖项明确且局部化，并简化了懒加载和整体的心智模型。理解独立组件（以及 `bootstrapApplication`/`provideRouter`/`provideHttpClient` 设置）对于在当前 Angular 中工作至关重要，而对于遗留代码仍然需要 NgModule 知识。