在 Angular 的前端开发体系中，组件（Component）是构建用户界面的核心单元，它将视图、逻辑和样式封装成独立的可复用模块。而@Component装饰器则是定义 Angular 组件的 “灵魂”—— 通过它我们能告诉 Angular 如何解析、渲染组件，以及组件如何与应用其他部分交互。本文将从@Component装饰器入手，一步步讲解 Angular 组件的创建、注册与使用，帮你夯实组件开发的基础。
一、核心概念：什么是 Angular 组件？
Angular 组件本质上是一个被@Component装饰器修饰的 TypeScript 类，它承载了三部分核心内容：
- 模板（Template）：定义组件的视图结构（HTML），决定用户看到的内容；
- 类（Class）：包含组件的业务逻辑（TypeScript），处理数据、事件、交互等；
- 样式（Styles）：定义组件的外观（CSS/SCSS 等），且样式默认作用域仅局限于当前组件。
组件是 Angular 应用的 “积木”，从页面级的根组件（AppComponent），到按钮、卡片等通用 UI 组件，都基于这一模式构建。
二、@Component 装饰器：组件的 “配置说明书”
@Component是 Angular 核心库@angular/core提供的装饰器，它接收一个元数据对象作为参数，用于配置组件的核心属性。先看一个最基础的@Component配置示例：
import { Component } from '@angular/core'; @Component({ // 组件唯一标识，用于模板中调用 selector: 'app-hello', // 内联模板（也可通过templateUrl指向外部HTML文件） template: `<h1>Hello, {{ name }}!</h1>`, // 内联样式（也可通过styleUrls指向外部样式文件） styles: [`h1 { color: #1677ff; }`] }) export class HelloComponent { // 组件类的属性，供模板绑定 name = 'Angular Component'; }下面拆解@Component元数据中最常用的核心配置项：
1. selector：组件的 “调用标签”
selector是组件的唯一选择器，决定了如何在其他模板中引用该组件，支持三种写法：
- 元素选择器（推荐）：如
app-hello，使用时直接写<app-hello></app-hello>； - 属性选择器：如
[app-hello]，使用时写<div app-hello></div>； - 类选择器：如
.app-hello，使用时写<div class="app-hello"></div>。
最佳实践：元素选择器统一以
app-为前缀（Angular 默认约定），避免与原生 HTML 标签冲突。
2. template/templateUrl：组件的视图模板
template：内联模板，适合简单的视图（如示例中的单行 HTML），使用反引号`支持多行；templateUrl：外部模板路径，适合复杂视图，示例：@Component({ selector: 'app-hello', templateUrl: './hello.component.html', // 指向外部HTML文件 styles: [`h1 { color: #1677ff; }`] })
模板中可使用 Angular 的模板语法（如插值表达式{{ }}、指令、绑定等），实现数据与视图的联动。
3. styles/styleUrls：组件的样式
styles：内联样式，数组形式，支持多行样式；styleUrls：外部样式文件路径，数组形式（可引入多个样式文件），示例：@Component({ selector: 'app-hello', templateUrl: './hello.component.html', styleUrls: ['./hello.component.css', './hello.component.scss'] })
关键特性：Angular 组件样式默认是 “封装” 的（通过 ViewEncapsulation），即样式仅作用于当前组件，不会污染全局或其他组件。
4. 其他常用配置
standalone：Angular 14 + 新增，标记组件是否为 “独立组件”（无需在 NgModule 中声明），默认false；imports：独立组件专用，声明组件依赖的其他独立组件、指令、管道；providers：组件级别的依赖注入提供者，仅在当前组件及其子组件生效。
三、组件的创建：两种方式（手动 / CLI）
1. 手动创建（了解底层）
步骤 1：在src/app下新建文件夹hello，创建hello.component.ts；步骤 2：编写组件类（如上文的 HelloComponent）；步骤 3（可选）：创建hello.component.html和hello.component.css，并修改@Component的templateUrl和styleUrls。
2. CLI 创建（推荐，高效）
Angular CLI 提供了generate component（简写g c）命令，一键生成组件文件（ts/html/css/spec.ts），并自动配置（若非独立组件，会自动在根模块 AppModule 的declarations中声明）。
# 创建常规组件（非独立），生成到src/app/hello目录 ng g c hello # 创建独立组件（Angular 14+） ng g c hello --standalone true生成的文件结构：
hello/ ├── hello.component.ts # 组件类 ├── hello.component.html # 模板 ├── hello.component.css # 样式 └── hello.component.spec.ts # 测试文件四、组件的注册：NgModule vs 独立组件
Angular 组件的 “注册” 本质是让 Angular 识别并允许使用该组件，分两种场景：
1. 非独立组件：在 NgModule 中声明
非独立组件必须在NgModule的declarations数组中声明，否则 Angular 会报错。
示例：根模块app.module.ts中声明 HelloComponent
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; // 导入组件 import { HelloComponent } from './hello/hello.component'; @NgModule({ declarations: [ AppComponent, HelloComponent // 声明组件 ], imports: [BrowserModule], providers: [], bootstrap: [AppComponent] // 根组件，应用启动时渲染 }) export class AppModule { }注意：一个组件只能在一个NgModule 中声明，重复声明会报错。
2. 独立组件：无需 NgModule，通过 imports 引入
独立组件（standalone: true）无需在 NgModule 中声明，使用时直接在其他组件的imports中引入即可。
示例：创建独立组件 HelloComponent
import { Component } from '@angular/core'; @Component({ selector: 'app-hello', templateUrl: './hello.component.html', styleUrls: ['./hello.component.css'], standalone: true // 标记为独立组件 }) export class HelloComponent { name = '独立组件'; }在根组件 AppComponent（若 AppComponent 也是独立组件）中引入：
import { Component } from '@angular/core'; import { HelloComponent } from './hello/hello.component'; @Component({ selector: 'app-root', template: `<app-hello></app-hello>`, standalone: true, imports: [HelloComponent] // 引入独立组件 }) export class AppComponent { }若根组件不是独立组件，可在根模块的imports中引入独立组件：
@NgModule({ declarations: [AppComponent], imports: [BrowserModule, HelloComponent], // 引入独立组件 bootstrap: [AppComponent] }) export class AppModule { }五、组件的使用：在模板中调用
注册完成后，即可在其他组件的模板中通过selector调用组件，核心场景包括：
1. 基础使用
直接在模板中写入组件的 selector 标签即可：
<!-- app.component.html --> <div class="app-container"> <h2>根组件容器</h2> <!-- 调用HelloComponent --> <app-hello></app-hello> </div>2. 传递数据（输入属性 @Input）
组件间通信最常用的方式：子组件通过@Input接收父组件传递的数据。
步骤 1：子组件 HelloComponent 定义输入属性
import { Component, Input } from '@angular/core'; @Component({ selector: 'app-hello', template: `<h1>Hello, {{ userName }}!</h1>` }) export class HelloComponent { // 定义输入属性，接收父组件传递的值 @Input() userName!: string; }步骤 2：父组件模板中传递数据
<!-- app.component.html --> <!-- 静态传值 --> <app-hello userName="Angular开发者"></app-hello> <!-- 动态传值（绑定父组件的属性） --> <app-hello [userName]="parentUserName"></app-hello>父组件类定义属性：
// app.component.ts export class AppComponent { parentUserName = '前端工程师'; }3. 触发事件（输出属性 @Output）
子组件通过@Output发射事件，父组件监听并处理。
步骤 1：子组件定义输出属性
import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-hello', template: ` <h1>Hello, {{ userName }}!</h1> <button (click)="onClick()">点击发送事件</button> ` }) export class HelloComponent { @Input() userName!: string; // 定义输出属性，发射自定义事件 @Output() greet = new EventEmitter<string>(); onClick() { // 发射事件，携带数据 this.greet.emit(`来自${this.userName}的问候！`); } }步骤 2：父组件监听事件
<!-- app.component.html --> <app-hello [userName]="parentUserName" (greet)="handleGreet($event)" ></app-hello>父组件处理事件：
// app.component.ts export class AppComponent { parentUserName = '前端工程师'; handleGreet(message: string) { alert(message); // 弹出子组件传递的消息 } }六、组件的生命周期（补充）
理解组件的生命周期能帮你更好地控制组件行为，Angular 组件从创建到销毁会触发一系列钩子函数，常用的有：
ngOnInit：组件初始化完成（输入属性已赋值），适合执行初始化逻辑；ngOnChanges：输入属性值变化时触发；ngOnDestroy：组件销毁前触发，适合清理资源（如取消订阅、定时器）。
示例：在 HelloComponent 中使用生命周期钩子
import { Component, Input, OnInit, OnDestroy } from '@angular/core'; @Component({ selector: 'app-hello', template: `<h1>Hello, {{ userName }}!</h1>` }) export class HelloComponent implements OnInit, OnDestroy { @Input() userName!: string; private timer!: any; ngOnInit() { // 组件初始化时启动定时器 this.timer = setInterval(() => { console.log('组件已初始化'); }, 1000); } ngOnDestroy() { // 组件销毁时清理定时器 clearInterval(this.timer); } }七、总结
Angular 组件的核心是@Component装饰器 + TypeScript 类，掌握以下关键点，就能搞定组件开发的基础：
@Component装饰器通过元数据配置组件的选择器、模板、样式等核心属性；- 组件创建推荐使用 Angular CLI，高效且符合规范；
- 组件注册分 NgModule 声明（非独立组件）和 imports 引入（独立组件）两种方式；
- 组件使用的核心是模板调用，结合
@Input/@Output实现父子组件通信； - 生命周期钩子帮助你精准控制组件的初始化、更新和销毁逻辑。
组件是 Angular 应用的基石，后续的路由、表单、服务等功能，最终都要落地到组件上。建议多动手编写简单组件，逐步掌握模板语法、组件通信、生命周期等知识点，为复杂 Angular 应用开发打下坚实基础。
